Controller wrapped component does not update validation rules

Describe the bug Native HTML elements work perfectly with dynamic validation rules (e.g. an input is required under mode A but not required under mode B), however when working with 3rd party libraries and Controller component, the rules do not get updated, it keeps using the original rule supplied to it for validation.

To Reproduce Steps to reproduce the behavior:

1. Wrap a component library’s Input element with <Controller />
2. Give it a rule that depends on a boolean state, when state is true, set rule to required, vice versa
3. toggle the boolean state, the validation is not updated(clearError wouldn’t clear the existing error either)

Codesandbox link (Required)

• works ok with native form elements: https://codesandbox.io/s/react-hook-form-get-started-4ywl5?file=/src/index.js:758-884
• Not working with Controller component: https://codesandbox.io/s/react-hook-form-custom-input-c9uoz?file=/src/index.js

Expected behavior After updating the validation rule, it should validate with the latest rule instead of the old one.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS 10.15
• Browser Chrome 81
• Version React-hook-form 5.5.1

[Moshyfawn]

Here’s a CSB with an example of using @hookform/resovers with the Zod’s validation schema @edediostoosa

[LookRain]

Yes, if your validation logic is dynamic or you can look into schema validation.

Thanks so much for the replies so far! I’ll checkout schema based validation 😃