I developed a website in reactjs using typescript, but Im far from beign an expert.

Selectors for filtering by any country, state or city are very important in my application, so I implemented them using country-state-city library, but iPhone users started having issues. I dont own an iPhone so by using BrowserStack I found out that the problem was this library because its heavy and its unmaintained.

Found a workaround to get the country and region selectors working, but cities are too heavy and still throws the error. I considered creating a fork and try to make it work but maybe there is another solution or workaround for my use case. This is the code that throws the error (I used the same logic to the country and regions):

export const CityOrCommuneSelect: React.FC<CityOrCommuneSelectProps> = ({ placeholder, handleSetValue, countryCode, stateCode, isClearable=false }) => {

  const [newCities, setNewCities] = useState<{ label: string; value: string }[]>([]);

  const getCities = async (country: string, state: string) => {
    const City = await import('country-state-city/lib/city');
    const {getCitiesOfState} = City.default;
    return getCitiesOfState(country, state);
  }
  
  useEffect(() => {
    const fetchCities = async () => {
      if (!countryCode || !stateCode) return;

      const fetchedCities = await getCities(countryCode, stateCode);

      const formattedCities = fetchedCities.map((val) => ({
        label: val.name,
        value: val.name,
      }));

      setNewCities(formattedCities);
    };

    fetchCities();

  }, [countryCode, stateCode]);

  return (
    <Select isClearable={isClearable} placeholder={placeholder} styles={customStyles} noOptionsMessage={() => "elige pais y región"} options={newCities} onChange={ val => handleSetValue("cityOrCommune", val?.value || '') } />
  )
}

is there a way to load this in a different way to avoid this error?