Issues when attempting to fetch data upon clicking select field options

[MonaAghili]

I'm using React Query to retrieve data for two select fields. The first select field is populated with data using the useQuery hook, and the second select field's options depend on the selected value of its sibling. When a new option is selected in the first field, a useMutation is triggered, sending a request to the server. If the request is successful, the resulting data is then displayed in the second field.

this is what my component look like : https://codesandbox.io/s/lingering-leftpad-jl4l5m?file=/src/FormComponent.js

the handleCityChange will never trigger and send request to API because of {...register("city")}
What should we do for scenarios like this?