Update phone number input

Use state variable for defining blank values.

categories/formatted/react/src/components/PhoneNumberInput/index.tsx

@@ -78,6 +78,7 @@ export const PhoneNumberInput = React.forwardRef<
   forwardedRef,
 ) => {
   const { clientSide } = useClientSide({ clientSide: enhanced });
+  const [phoneNumber, setPhoneNumber] = React.useState<Value>(value?.toString() ?? '');
   const labelId = React.useId();
   const defaultId = React.useId();
   const id = idProp ?? defaultId;
@@ -92,7 +93,8 @@ export const PhoneNumberInput = React.forwardRef<
     if (!input) {
       return;
     }
-    delegateTriggerEvent('change', input, phoneNumberValue);
+    setPhoneNumber(phoneNumberValue);
+    delegateTriggerEvent('change', input, phoneNumberValue ?? '');
   };
 
   const commonInputStyles = clsx(
@@ -157,6 +159,7 @@ export const PhoneNumberInput = React.forwardRef<
           <PhoneInput
             {...etcProps}
             ref={undefined}
+            value={phoneNumber}
             onChange={handlePhoneInputChange}
             defaultCountry={defaultCountry}
             className={commonInputStyles}