Allow defaultCountry to be extracted from initial value

Hi there, I’m currently using the package with the defaultCountry prop set to “FR” as most numbers are French. However some numbers have different formats, eg an initial value for the component may be a UK number “+44…”.

import React, { useState } from "react";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";
import fr from "react-phone-number-input/locale/fr";

export default function App() {
  // If number coming in from DB isn't French...
  const [phone, setPhone] = useState("[phone]");

  return (
    <div className="App">
      <h1>Phone numbers</h1>

      <PhoneInput
        initialValueFormat="national"
        labels={fr}
        defaultCountry="FR"
        countries={["FR", "GB"]}
        value={phone}
        onChange={setPhone}
      />
      <p>{phone}</p>
    </div>
  );
}

Is there any way I can set defaultCountry to be updated to match the initial value? Or force an update to the correct flag?

Or failing that are there any utility functions perhaps to determine the countryCode from the number? I could then use this to run a useEffect

Many thanks!

https://codesandbox.io/s/phone-numbers-1l9pi?file=/src/App.js:0-628

[catamphetamine]

I have still fixed the bug though: https://gitlab.com/catamphetamine/react-phone-number-input/-/commit/779b130247b0ba25d1f7d7650530bba2bc8c2d03 Your demo doesn’t show France now in the case you’ve described: https://codesandbox.io/s/phone-numbers-forked-8b1cy?file=/src/App.js

[catamphetamine]

Hmm, looks like [phone] doesn’t belong to any country. https://libphonenumber.appspot.com/phonenumberparser?number=%2B44+7889+77366&country=RU

What icon would you suggest the library show in such case? Will “international” icon be appropriate?