fix: prevent phone input from running validation on mount when empty

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -12,7 +12,6 @@ import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import { detailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"

components/TempDesignSystem/Form/Phone/index.tsx

@@ -58,8 +58,14 @@ export default function Phone({
       forceDialCode: true,
       value: phone,
       onChange: (value) => {
-        setValue(name, value.phone)
-        trigger(name)
+        // If not checked trigger(name) forces validation on mount
+        // which shows error message before user even can see the form
+        if (value.inputValue) {
+          setValue(name, value.phone)
+          trigger(name)
+        } else {
+          setValue(name, "")
+        }
       },
     })