Formatting react-intl-tel-input after flag change

Question

I'm trying to update the phone number input format to match the country format when changing countries. When I initially input the number it will format based on the country currently selected, but when I change to a different country the format remains formatted to the original country that was selected, and does not adjust to the newly selected format.

I've tried to trigger a useState change but it does not update the format boolean.

below is the IntlTelInput for my code

              format={true}
              fieldName="phone"
              inputClassName="checkout__input"
              onPhoneNumberChange={onChange}
              onSelectFlag={handleSelectFlag}
              defaultValue = {defaultPhone}

            />

and the onChange and handleSelectFlag functions

    if(isValid) {
      validatedParentNumber = fullNumber.replace(/\s|-/g, '')
      setValue("phone", validatedParentNumber);
      setIntlError(false);
      clearErrors('phone');
      let dial = selectedCountryData.dialCode;
      userCountryCode = `+${dial}`;
    } else {
      setIntlError(true);
      setValue("phone", null)
    }
  };

  const handleSelectFlag: IntlTelInputProps['onSelectFlag'] = (currentNumber, seletedCountryData, fullNumber, isValid) => {
    if(isValid) {
      let updatedIntlNum = fullNumber.replace(/\s|-/g, '')
      let dial = seletedCountryData.dialCode;
      userCountryCode = `+${dial}`;
      setValue("phone", updatedIntlNum)
      setIntlError(false);
      clearErrors('phone');
    } else {
      setIntlError(true);
      setValue("phone", null)
    }
  };

Answer 1

You want to make separateDialCode prop to true to work the onSelectFlag event.