issue: OnChange event does not fire for HTML select within a React Hook Form

[floracode1]

Version Number

7.31.2

Codesandbox/Expo snack

none

Steps to reproduce

1. Create a select drop down within a react hook form. E.g.
   <select
   id="province"
   className={form-control ${errors.province ? "has-error" : "" }}
   name="province

                            onChange={(e) => handleSelectChange(e)}
                            {...register("province", registeredOptions.province)}
                        >
                            <option value="">Please Select</option>
                            <option value="ON">Ontario</option>
                            <option value="QB">Quebec</option>
                        </select>
   

2. Create an onChange event for this select drop down.

3. Event does not fire. Change event to onClick and it works. Move select drop down outside of the react hook form and it works as well.

Expected behaviour

onChange event should fire for dropdown value change

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

Temporary closing as "need more info"

Please, take your time to provide a minimal reproduction codesandbox

[floracode1]

Please see the example below:
https://snack.expo.dev/@flora.liao/select-react-hook-form

Change the onChange event on line 32 to onClick and the alert is triggered, but not for onChange

[floracode1]

Please see the example below: https://snack.expo.dev/@flora.liao/select-react-hook-form

Change the onChange event on line 32 to onClick and the alert is triggered, but not for onChange

[bluebill1049]

onChange={(e) => alert("clicked")}
{...register("province")}

it's getting overwritten: https://react-hook-form.com/api/useform/register

[floracode1]

cool, thank you!