How do i retain national number when user change flag? If they change flag the numbers they put in previously should be left. setValue doesnt trigger the value field.

function App() {

  const { register, handleSubmit, watch, errors, setValue, control } = useForm();
  const [valueX, setValueX] = useState("");

  useEffect(() => {    
    try{
      sessionStorage.setItem("national", parsePhoneNumber(valueX).nationalNumber)
    }catch(err){}

    try{
      sessionStorage.setItem("countryCode", parsePhoneNumber(valueX).countryCallingCode)
    }catch(err){}
}, [valueX]);


  function test(x){     
    console.log("changed country") 
      console.log(getCountryCallingCode(x))
    setValue("test",x+sessionStorage.getItem("national"))
  }
  
  return (
    <div className="App">     
      <form>    
        <PhoneInput name="test" international value={valueX} onChange={e => setValueX(e)}
        onCountryChange={e => {test(e)}}
        control={control}        
      />   
      </form>    
    </div>
  );
}

export default App;