issue: Error message have wrong type when using useFormContext

Version Number

7.33.1

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-chakra-ui-3nbwup

Steps to reproduce

I have react-hook-form with Chakra-ui and after updating to the latest version of react-hook-form (7.33.1) and @types/react (18.0.15) and @types/react-dom (18.0.6)

When creating a component and using useFormContext(), when trying to display the error message in Chakra-ui <FormErrorMessage> component I’m getting this error:

Type ‘Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined’ is not assignable to type ‘ReactNode’. Type ‘Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>’ is not assignable to type ‘ReactNode’. Type ‘Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>’ is not assignable to type ‘string’.

This only happens when we use useFormContext(). As you can see in the provided codesandbox, when registering an input with {...register('lastName')} I don’t have this issue.

Expected behaviour

Expected errors to not throws type errors.

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

[alveshelio]

Hey @bluebill1049,

I really can’t thank you enough for being to quick and so helpful.

I’ve made a donation a couple of weeks ago and I know that it is not near enough for all the great work you put into react-hook-form but it’s a small gesture to encourage people like you who put so much of your time into open source and I think some times we forget how much these open source projects helps us. Once again, a big thank you.

Regarding providing a type definition, in the codesandbox I’ve provided, if I pass FormValues to useFormContext<FormValues>() then it solves the problem. I’m just wondering how I can make it work when it comes to a component with a generic type. If I do something like this

const ControlInput = <T extends FieldValues>() => {
  const {
    register,
    formState: { errors }
  } = useFormContext<T>();

  return (
    <FormControl id="firstName" isInvalid={!!errors["firstName"]}>
      <Input {...register("firstName")} placeholder="First Name" />
      <FormErrorMessage>{errors["firstName"]?.message}</FormErrorMessage>
    </FormControl>
  );
};

Then I get this:

[bluebill1049]

Thanks for understanding @alveshelio I have updated the changelog to point this out, I am pretty excited for the next feature for useFieldArray rules prop, we can finally validate field array by the build-in validator. Make sure you cast your API preference in the poll if you are going to use it. https://github.com/react-hook-form/react-hook-form/pull/8562 Also thank you very much for the donation (forgot to mention that)