United Kingdom showing list of cities in place of states

[apoorv1316]

I have an option to add country, state, and city in my application. In countries, if I select the United Kingdom, then in states it shows the list of cities and then the cities list is empty because of it. So I have to select England as a state, and then only the cities list is loaded in the city.

const assignCountries = async allCountries => {
    const countryData = await allCountries.map(country => ({
      value: country?.isoCode && country.isoCode,
      label: country.name,
      code: country?.isoCode && country?.isoCode,
    }));
    setCountries(countryData);
  };

  useEffect(() => {
    const allCountries = Country.getAllCountries();
    assignCountries(allCountries);
  }, []);

  const updatedStates = countryCode =>
    State.getStatesOfCountry(countryCode).map(state => ({
      label: state.name,
      value: state.name,
      code: state?.isoCode && state.isoCode,
      ...state,
    }));

  const updatedCities = values => {
    const allStates = State.getAllStates();
    const currentCity = allStates.filter(
      state => state.name == values.state.label
    );

    const cities = City.getCitiesOfState(
      values.country.code,
      currentCity[0] && currentCity[0].isoCode
    ).map(city => ({
      label: city.name,
      value: city.name,
      ...city,
    }));

    return cities;
  };