diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 49ccb7e49d..f2983aef59 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -251,7 +251,9 @@ const BookingPage = (props: BookingPageProps) => {
       language: i18n.language,
       rescheduleUid,
       user: router.query.user,
-      location: getLocationValue(booking.locationType ? booking : { locationType: selectedLocation }),
+      location: getLocationValue(
+        booking.locationType ? booking : { ...booking, locationType: selectedLocation }
+      ),
       metadata,
       customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
         label: props.eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label,
@@ -279,7 +281,7 @@ const BookingPage = (props: BookingPageProps) => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <CustomBranding val={props.profile.brandColor} />
-      <main className=" mx-auto my-0 max-w-3xl rounded-sm sm:my-24 sm:border sm:dark:border-gray-600">
+      <main className="mx-auto my-0 max-w-3xl rounded-sm sm:my-24 sm:border sm:dark:border-gray-600">
         {isReady && (
           <div className="overflow-hidden border border-gray-200 bg-white dark:border-0 dark:bg-neutral-900 sm:rounded-sm">
             <div className="px-4 py-5 sm:flex sm:p-4">
@@ -391,8 +393,14 @@ const BookingPage = (props: BookingPageProps) => {
                         {t("phone_number")}
                       </label>
                       <div className="mt-1">
-                        {/* @ts-ignore */}
-                        <PhoneInput name="phone" placeholder={t("enter_phone_number")} id="phone" required />
+                        <PhoneInput
+                          // @ts-expect-error
+                          control={bookingForm.control}
+                          name="phone"
+                          placeholder={t("enter_phone_number")}
+                          id="phone"
+                          required
+                        />
                       </div>
                     </div>
                   )}
diff --git a/apps/web/components/ui/form/PhoneInput.tsx b/apps/web/components/ui/form/PhoneInput.tsx
index 8d6f78389d..4c35a6ea06 100644
--- a/apps/web/components/ui/form/PhoneInput.tsx
+++ b/apps/web/components/ui/form/PhoneInput.tsx
@@ -1,18 +1,24 @@
 import React from "react";
-import BasePhoneInput, { Props as PhoneInputProps } from "react-phone-number-input";
+import { Control } from "react-hook-form";
+import BasePhoneInput, { Props } from "react-phone-number-input/react-hook-form";
 import "react-phone-number-input/style.css";
 
 import classNames from "@lib/classNames";
-import { Optional } from "@lib/types/utils";
 
-export const PhoneInput = (
-  props: Optional<PhoneInputProps<React.InputHTMLAttributes<HTMLInputElement>>, "onChange">
-) => (
+type PhoneInputProps = {
+  value: string;
+  id: string;
+  placeholder: string;
+  required: boolean;
+};
+
+export const PhoneInput = ({ control, name, ...rest }: Props<PhoneInputProps>) => (
   <BasePhoneInput
-    {...props}
+    {...rest}
+    name={name}
+    control={control}
     className={classNames(
-      "border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px px-3 shadow-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
-      props.className
+      "border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px px-3 shadow-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white"
     )}
     onChange={() => {
       /* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */