如何使用反应钩子使选择下拉默认选择

Question

I have two select options one is dependent to other, One is country other is state so when I select Country I am changing state as well, which was working fine previously, but now as per my requirement I want to default select one country and show its cities which is also fine.

Issue is

here in my code I Have made England as default selected, but when I am again selected other option suppose India, it is not selecting India.

I don't know why this issue is showing up

What I have done

  const [selected_country, setselected_country] = useState("England");
  const [selected_state, setselected_state] = useState("London");

Creating states for default selected as above, after this

 <select
    name="Country"
    value={selected_country}
    onChange={(e) => onchange_device(e.target.value)}
  >
    {data.map((li, index) => (
      <option key={index} value={li.country}>
        {li.country}
      </option>
    ))}
  </select>

this is how I am looping through countries of my data

<select name="city" value={selected_state}>
    {cityOptions.map((city, index) => (
      <option key={index} value={city.city_name}>
        {city.city_name}
      </option>
    ))}
  </select>

the Above one is to set default cities.

I don't know where I am going wrong.

My code sandbox for better understanding

Answer 1

I made two changes,

1. Changed data[1] in line 40. Because on page load, England was selected, but states were from India.

const [cityOptions, setCityOptions] = useState(data[1].cities);

2. Added an onChange handler to the select dropdown in line 61.

<select name="city" value={selected_state} onChange={e => setselected_state(e.target.value)}>