I’m working on a React project with two dependent dropdowns:

1. A SelectCountry dropdown for selecting a country.
2. A SelectProvince dropdown for selecting a province, which dynamically loads its options based on the selected country.

Here’s the relevant code:

<SelectCountry
  name="country"
  value={paymentStepData.address.country}
  onChange={handleAddressUpdate}
/>

<SelectProvince
  name="province"
  selectedCountry={paymentStepData.address.country}
  value={paymentStepData.address.province}
  onChange={handleAddressUpdate}
/>

Problem:

When the country dropdown is auto-selected (e.g., via browser auto-fill or preloaded data), the province dropdown shows “No Options”, even though the country value is set correctly. The user has to reselect the country to load the province options.

Question:

How can I ensure the SelectProvince dropdown loads options properly when the country dropdown is auto-selected?