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.

thanks

this is my code lines:

import Input, {
  getCountries,
  getCountryCallingCode,
} from "react-phone-number-input/input";
import en from "react-phone-number-input/locale/en.json";
import "react-phone-number-input/style.css";

const RegisterForm = () => {
  const [onFocuseInput, setOnFocuseInput] = useState("");
  const [phoneNumber, setPhoneNumber] = useState();
  const [country, setCountry] = useState();

const CountrySelect = ({ value, onChange, labels, ...rest }) => (
    <select
      {...rest}
      value={value}
      onChange={(event) => {
        onChange(event.target.value || undefined);
      }}
    >
      <option value="">country</option>
      {getCountries().map((country) => (
        <option key={country} value={country}>
          {labels[country]} +{getCountryCallingCode(country)}
        </option>
      ))}
    </select>
  );


 <div className="mb-6 flex">
          <CountrySelect
            className={`border-b-2 bg-none outline-none w-1/4 text-xs ${
              onFocuseInput === "country"
                ? "border-blue-700 "
                : "border-gray-300"
            }`}
            labels={en}
            value={country}
            onChange={setCountry}
            name="countrySelect"
            onFocus={() => setOnFocuseInput("country")}
          />
          <Input
            className={`${
              onFocuseInput === "phoneNumber"
                ? "focusedInput w-full"
                : "registerInput w-full"
            }`}
            placeholder="phoneNumber"
            dir="ltr"
            country={country}
            value={phoneNumber}
            onChange={setPhoneNumber}
            name="phoneNumber"
            onFocus={() => setOnFocuseInput("phoneNumber")}
            required
          />
        </div>
        {loading ? (
          <div className="flex justify-center items-center my-5 bg-red-600 p-4 rounded-full">
            <div
              className="spinner-border animate-spin inline-block w-8 h-8 border-4 border-blue-700 border-t-white rounded-full"
              role="status"
            ></div>
          </div>
  );
};

export default RegisterForm;