issue: unregister does not work correctly when conditionally rendering fields with the same key

[archiemcquaid]

Version Number

7.51.1

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/eloquent-lake-y6pm3d

Steps to reproduce

Hi. I have an issue where values from unregistered fields persist if another field is registered with the same key afterwards.

1. Country is set to UK. This renders the Province input with name="province".
2. Enter test in the Province input
3. Select USA from country select. This triggers the province input field to unmount and unregister is called. A state select is rendered with the same name="province"
4. Click submit
5. onSubmit is called with {country: 'US', province: 'test'}

Interestingly when logging the result of watch() it shows province is correctly removed however when clicking onSubmit, the old value returns.

Expected behaviour

1. Country is set to UK. This renders the Province input with name="province".
2. Enter test in the Province input
3. Select USA from country select. This triggers the province input field to unmount and unregister is called. A state select is rendered with the same name="province"
4. Click submit
5. Validation fails as province is unset and no state has been selected.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

https://react-hook-form.com/faqs#Whyisdefaultvaluenotchangingcorrectlywithternaryoperator