react-hook-form: Allow React components to be returned as `validate` rule error message

Hello,

Is your feature request related to a problem? Please describe. My issue is that the validate method only allows to return a bool or a string, and returning a React component will not validate as an error. Being able to set a React component as an error message would allow for more complex and useful (UI-wise) error handling. As an example, consider a password input with a dynamic rule checking for its constraints (required characters, length, etc.). The validate method works very well with this kind of complex rule checks, but I would also like to be able to give instant feedback as the user types a password, via a react component instead of a string.

I would also like to point out that setting a component as an error message in the other validation methods works (I tried with pattern) (

register({
    pattern({
        value: /regex/,
        message: component
    }),
})

).

Describe the solution you’d like I’d like the validate method to accept a React component as a possible return type, to be handled as a message error.

Describe alternatives you’ve considered None.

Additional context To give you a more concrete example, here is a condensed snippet of what I am trying to do:

register({
    validate: customValidate, 
})

customValidate: value => {
    const constraints = {
        hasMinLen: value.length >= 8,
        hasUppercase: /([A-Z]+)/.test(value),
        hasLowercase: /([a-z]+)/.test(value),
        hasNumber: /([0-9]+)/.test(value),
    };

     return (
         Object.values(constraints).every(constraint => constraint) || (
            <span>
                Le mot de passe doit contenir au moins:
                <div className="tags">
                    {!constraints.hasMinLen && (
                        <span className="tag is-danger">8 caractères</span>
                    )}
                    {!constraints.hasLowercase && (
                        <span className="tag is-danger">1 minuscule</span>
                    )}
                    {!constraints.hasUppercase && (
                        <span className="tag is-danger">1 majuscule</span>
                    )}
                    {!constraints.hasNumber && (
                        <span className="tag is-danger">1 chiffre</span>
                    )}
                </div>
            </span>
         )
    );
}

Thank you very much for your attention!