When the menu opens, React-select freezes according to the list of countries

Question

I am using React Select and there is an API in which I get the countries list. In API there are 256 countries code. The user has to choose the country. But the screen freezes when menu is open. The reason is flag images. I use react-world-flag. And all images download.

I think if I use useTransition hook, I solve my problem. But I am not sure. If you have solution, answer this.

My codes

import axios from "axios";
import React from "react";
import { useTransition, useEffect, useState } from "react";
import Select from "react-select";
import Flag from "react-world-flags";

const ReactSelectFlag = () => {
  const [countries, setCountries] = useState([]);
  const [isPending, startTransition] = useTransition();
  const [menuIsOpen, setMenuIsOpen] = useState(false);

  useEffect(() => {
    axiosInstance.get("v1/countries").then(res => {
      setCountries(res.data.data);
    });
  }, []);

  const handleGet = () => {
    startTransition(() => setMenuIsOpen(true));
  };

  return (
    <Select
      options={countries}
      getOptionValue={option => option?.id}
      menuIsOpen={menuIsOpen}
      onMenuOpen={handleGet}
      onMenuClose={() => setMenuIsOpen(false)}
      getOptionLabel={option => (
        <div style={{ display: "flex", alignItems: "center" }}>
          <span style={{ marginRight: "6px" }}>
            <Flag code={option?.code} width="24px" height="14px" />
          </span>{" "}
          {option?.code} - {option?.name}{" "}
        </div>
      )}
    />
  );
};

export default ReactSelectFlag;

this code works but when I click the button dropdown does not appear. After success rendering the options open. I want when I click the button, options have to open and after rendering all flags have to show.