flag dropdown example

import "./styles.css";
import Select from "react-select";
import { hasFlag } from "country-flag-icons";
import { countries } from "countries-list";
import Flags from "country-flag-icons/react/3x2";

export default function App() {
  const options = Object.entries(countries)
    .map((code) => {
      const exist = hasFlag(code[0]);
      if (!exist) {
        return undefined;
      }
      const Component = Flags[code[0]];
      return {
        value: code[1].name,
        label: (
          <>
            <Component
              title={code[0]}
              style={{ display: "inline-block", height: "1em", width: "1em" }}
            />
            &nbsp;
            <span>{`${code[0]} ${code[1].name}`}</span>
          </>
        )
      };
    })
    .filter(Boolean);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <div>
        <Select
          isMulti={true}
          isClearable={true}
          isSearchable={true}
          isDisabled={false}
          name="colors"
          options={options}
          classNamePrefix="select"
        />
      </div>
    </div>
  );
}