根据其他select React更改select中的选项

Question

如何根据国家（地区）的第一选择更改城市（第二选择）的选项？ 如果我在更改了第一个选择后打开了第二个选择，则它可以正常工作，但是我仍然看到较旧的选项。

例如，英格兰->伦敦，当将英格兰更改为德国时，第二选择中仍然可见的是伦敦，但是如果我打开第二选择，则选项将更改为德国的城市。

const countryJson = {
"England": [
  "London"
],
"Germany": [
  "Berlin",
]}
return (
<IonList lines="none" >
  <IonItem>
    <IonLabel>{i18n.t('Place')}</IonLabel>
    <IonSelect value={country} okText="Okay" cancelText="Dismiss" onIonChange={e => {setCountry(e.detail.value); setDisabled(false); changeCityAccordingToCountry(e.detail.value);}}>
      <IonSelectOption value="England">England</IonSelectOption>
      <IonSelectOption value="Germany">Germany</IonSelectOption>
    </IonSelect>
  </IonItem>
  <IonItem><IonLabel>{i18n.t('City')}</IonLabel>
    <IonSelect value={city} okText="Okay" cancelText="Dismiss" onIonChange={e => {setCity(e.detail.value); setDisabled(false)}}>

      {countryJson[country].map((element, index) => {
        return (
          <IonSelectOption key={index}>{element}</IonSelectOption>
        );
      })};

    </IonSelect>
  </IonItem>
</IonList>


  );