title: how to display country flags in custom react input phone in react?
body: <p>recently I implemented a custom react input phone but I can't display country flags in the options and in the selected country.
  actually, I cant use the PhoneInput directly because I need to extract the country and send its label to the server (like: 'US').
  if do you have any idea for displaying flags in the custom inputs or extracting selected country labels in the default PhoneInput, please answer.</p>
  <p>thanks</p>
  <p>this is my code lines:</p>
  <pre><code>import Input, {
    getCountries,
    getCountryCallingCode,
  } from &quot;react-phone-number-input/input&quot;;
  import en from &quot;react-phone-number-input/locale/en.json&quot;;
  import &quot;react-phone-number-input/style.css&quot;;
  
  const RegisterForm = () =&gt; {
    const [onFocuseInput, setOnFocuseInput] = useState(&quot;&quot;);
    const [phoneNumber, setPhoneNumber] = useState();
    const [country, setCountry] = useState();
  
  const CountrySelect = ({ value, onChange, labels, ...rest }) =&gt; (
      &lt;select
        {...rest}
        value={value}
        onChange={(event) =&gt; {
          onChange(event.target.value || undefined);
        }}
      &gt;
        &lt;option value=&quot;&quot;&gt;country&lt;/option&gt;
        {getCountries().map((country) =&gt; (
          &lt;option key={country} value={country}&gt;
            {labels[country]} +{getCountryCallingCode(country)}
          &lt;/option&gt;
        ))}
      &lt;/select&gt;
    );
  
  
   &lt;div className=&quot;mb-6 flex&quot;&gt;
            &lt;CountrySelect
              className={`border-b-2 bg-none outline-none w-1/4 text-xs ${
                onFocuseInput === &quot;country&quot;
                  ? &quot;border-blue-700 &quot;
                  : &quot;border-gray-300&quot;
              }`}
              labels={en}
              value={country}
              onChange={setCountry}
              name=&quot;countrySelect&quot;
              onFocus={() =&gt; setOnFocuseInput(&quot;country&quot;)}
            /&gt;
            &lt;Input
              className={`${
                onFocuseInput === &quot;phoneNumber&quot;
                  ? &quot;focusedInput w-full&quot;
                  : &quot;registerInput w-full&quot;
              }`}
              placeholder=&quot;phoneNumber&quot;
              dir=&quot;ltr&quot;
              country={country}
              value={phoneNumber}
              onChange={setPhoneNumber}
              name=&quot;phoneNumber&quot;
              onFocus={() =&gt; setOnFocuseInput(&quot;phoneNumber&quot;)}
              required
            /&gt;
          &lt;/div&gt;
          {loading ? (
            &lt;div className=&quot;flex justify-center items-center my-5 bg-red-600 p-4 rounded-full&quot;&gt;
              &lt;div
                className=&quot;spinner-border animate-spin inline-block w-8 h-8 border-4 border-blue-700 border-t-white rounded-full&quot;
                role=&quot;status&quot;
              &gt;&lt;/div&gt;
            &lt;/div&gt;
    );
  };
  
  export default RegisterForm;
  </code></pre>