diff --git a/packages/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx
index d29df98a33..8cf27ba764 100644
--- a/packages/ui/form/PhoneInput.tsx
+++ b/packages/ui/form/PhoneInput.tsx
@@ -1,5 +1,5 @@
 import { isSupportedCountry } from "libphonenumber-js";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import PhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/style.css";
 
@@ -18,11 +18,20 @@ export type PhoneInputProps = {
 };
 
 function BasePhoneInput({ name, className = "", onChange, ...rest }: PhoneInputProps) {
+  useEffect(() => {
+    if (!rest.value) {
+      return;
+    }
+    const formattedValue = rest.value.trim().replace(/^\+?/, "+");
+    onChange(formattedValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const defaultCountry = useDefaultCountry();
   return (
     <PhoneInput
       {...rest}
-      country={defaultCountry}
+      country={rest.value ? undefined : defaultCountry}
       enableSearch
       disableSearchIcon
       inputProps={{