Отображение предстоящих параметров выбора с логикой для предыдущего выбранного поля выбора

Я получаю данные из API, например, ссылки, вложенные в объекты состояния.

Пример:

const data = [
  {
    id: 1,
    name: 'State One',
    cities: [
      {
        id: 1,
        state: 'State One',
        name: 'City One'
      },
      {
        id: 2,
        state: 'State One',
        name: 'City Two'
      },
      {
        id: 3,
        state: 'State One',
        name: 'City Three'
      }
    ]
  },
  {
    id: 2,
    name: 'State 2',
    cities: [
      {
        id: 4,
        state: 'State 2',
        name: 'City 5'
      }
    ]
  }
]

Я должен указать параметры выбора городов в соответствии с родительским государством. Допустим, пользователь выбрал State One в поле выбора штата, тогда в следующем поле города должны быть только варианты городов State One. Как его настроить?

В настоящее время; Я создал полую структуру полей ввода выбора, но ничего не могу найти, как ее настроить. Мне нужна небольшая помощь или любая идея, чтобы начать с.

Это текущий код;

<Col lg = "6" md = "12" className = "mb-1">
<Label className = "form-label  py-1" for = "state">
    State
</Label>{' '}
<Row></Row>
<Select
    id = "state"
    options = {stateOptions}
    defaultValue = {stateOptions[0]}
    onChange = {(choice) => console.info(choice.value)}
/>
</Col>
<Col lg = "6" md = "12" className = "mb-1">
<Label className = "form-label  py-1" for = "city">
    City
</Label>{' '}
<Row></Row>
<Select
    id = "city"
    classNamePrefix = "select"
    options = {cityOptions}
    onChange = {(choice) => console.info(choice.value)}
/>
</Col>

Я видел некоторые статьи, но они предлагают использовать библиотеки npm, но я не могу их использовать, потому что данные сильно отличаются от тех, с которыми я хочу работать.