How use async react-select with react-query and Next js

[Armer7]

How best to use async React-select when request data through React -query in Next JS? I also need get filter data on the client.
This is the only way it works for me.

//SelectAutocomplete
import Select, { components } from 'react-select';

const SelectAutocomplete = ({ isDropDownIndicator, ...rest }) => {
  const DropdownIndicator = (props) => {
    return isDropDownIndicator ? (
      <components.DropdownIndicator {...props} />
    ) : null;
  };

  return (
      <Select
        {...rest}
        components={{ DropdownIndicator }}
        />
  );
};

export default SelectAutocomplete;

//file with form
const DynamicSelect = dynamic(
  () => import('@dev/components/SelectAutocomplete/'),
  { ssr: false }
);
function ExpertStart() {
const [countriesForSelect, setCountriesForSelect] = useState([]);
  const [filter, setFilter] = useState({});

  const {
    isLoading,
    isSuccess,
    isError,
    data: countries,
  } = useQuery(['countries', { filter }], () => getCountries(filter));

  useEffect(() => {
    isSuccess &&
      setCountriesForSelect(
        countries.results.map((item) => ({
          value: item.iso2,
          label: `${CountryToFlag(item.iso2)} ${item.name}`,
        }))
      );
  }, [countries]);

  return (
      <main>
        <form onSubmit={onSubmit}>
                <DynamicSelect
                  name="country"
                  classNamePrefix="country"
                  instanceId="country"
                  isClearable
                  isDropDownIndicator
                  options={countriesForSelect}
                  onInputChange={(inputValue) =>
                    setFilter({ filter: { name: { $regex: inputValue } } })
                  }
                  placeholder={'Country'}
                />