title: Using react-hook-form values as props using Typescript
body: <p>I am new to Typescript and having troubles getting the types to work correctly when I have <code>react-hook-form</code> values as props.</p>
  <p>For example, I have a generic <code>Form</code> component that I use for many forms.</p>
  <pre class="lang-js prettyprint-override"><code>interface Props {
    reactHookForm: UseFormMethods&lt;any&gt;
    onSubmit: SubmitHandler&lt;any&gt; 
    isDisabled?: boolean
    isLoading?: boolean
    isReadOnly?: boolean
    children: ReactElement
  }
  
  const Form = ({ reactHookForm, onSubmit, isDisabled = false, isLoading = false, isReadOnly = false, children }: Props) =&gt; {
    const { handleSubmit, register, errors, control, watch } = reactHookForm
    return (
      &lt;Context.Provider value={{ register, errors, control, watch, isDisabled, isLoading, isReadOnly }}&gt;
        &lt;form onSubmit={handleSubmit(onSubmit)} className=&quot;w-full&quot;&gt;
          {children}
        &lt;/form&gt;
      &lt;/Context.Provider&gt;
    )
  }
  </code></pre>
  <p>And in an example component I have:</p>
  <pre class="lang-js prettyprint-override"><code>const Auth = ({ onSignIn }: Props) =&gt; {
    const signInForm = useForm({ defaultValues, resolver })
  
    const onSubmit: SubmitHandler&lt;FormData&gt; = (values: FormData) =&gt; {
      const { email, password } = values
  
      const isAuthorized = (user: MyCustomUser) =&gt; {
        // do stuff
      }
  
      const onCompleted = () =&gt; {
        // do stuff
      }
      
      const onError = (error: MyCustomError) =&gt; {
        // do stuff
      }
      signInWithEmailAndPassword({ email, password, onCompleted, onError, isAuthorized })
    }
  
    return (
      &lt;section className=&quot;flex h-full w-full justify-center items-center bg-gray-100 dark:bg-gray-800&quot;&gt;
          {/* some components... */}
          &lt;Form reactHookForm={signInForm} onSubmit={onSubmit} isLoading={attemptingSignIn}&gt;
            {/* form components */}
          &lt;/Form&gt;
          {/* some more components ... */}
      &lt;/section&gt;
    )
  }
  </code></pre>
  <p>and with my <code>FormData</code>, <code>defaultValues</code> and <code>resolver</code> coming from file that looks something like:</p>
  <pre><code>import { Resolver } from &quot;react-hook-form&quot;
  import { yupResolver } from &quot;@hookform/resolvers/yup&quot;
  import { object, SchemaOf, string } from &quot;yup&quot;
  import { createInputRequiredError } from &quot;Components/Form/utils&quot;
  
  type FormData = {
    email: string
    password: string
  }
  
  const defaultValues: FormData = { email: &quot;&quot;, password: &quot;&quot; }
  
  const schema: SchemaOf&lt;FormData&gt; = object().shape({
    email: string().required(createInputRequiredError(&quot;email&quot;)),
    password: string().required(createInputRequiredError(&quot;password&quot;))
  })
  const resolver = yupResolver(schema)
  
  export type { FormData }
  export { defaultValues, resolver }
  </code></pre>
  <p>My problem is that I have to use <code>reactHookForm: UseFormMethods&lt;any&gt;</code> and <code>onSubmit: SubmitHandler&lt;any&gt;</code> with the <code>any</code> type. React hook form has a <code>FieldValues</code> and I thought I could use this by having those types as  <code>reactHookForm: UseFormMethods</code> and <code>onSubmit: SubmitHandler&lt;FieldValues&gt;</code> however I get the following error:</p>
  <pre><code>Types of parameters 'data' and 'data' are incompatible.
      Type '{ [x: string]: any; }' is missing the following properties from type '{ email: string; password: string; }': email, password
  </code></pre>
  <p>How can I set up the <code>reactHookForm</code> and <code>onSubmit</code> types so that they can be generic to any valid <code>react-hook-form</code> values?</p>
  <hr />
  <p><strong>Update</strong></p>
  <p>After upgrading my package to the latest version of <code>react-hook-form:7.3.0</code> I now have a slightly different message (I think these are still equivalent problems).</p>
  <pre><code>Type 'UseFormReturn&lt;FormData&gt;' is not assignable to type 'UseFormReturn&lt;FieldValues&gt;'.
    Types of property 'setError' are incompatible.
      Type 'UseFormSetError&lt;FormData&gt;' is not assignable to type 'UseFormSetError&lt;FieldValues&gt;'.
  </code></pre>
  <p>My Form provider was slightly update, it now looks like:</p>
  <pre class="lang-js prettyprint-override"><code>interface Props {
    reactHookForm: UseFormReturn&lt;any&gt;
    onSubmit: SubmitHandler&lt;any&gt;
    isDisabled?: boolean
    isLoading?: boolean
    isReadOnly?: boolean
    children: ReactElement | ReactElement[] | string
  }
  
  const Form = ({ reactHookForm, onSubmit, isDisabled = false, isLoading = false, isReadOnly = false, children }: Props) =&gt; {
    const {
      handleSubmit,
      register,
      formState: { errors },
      control,
      watch,
      getValues,
      setValue
    } = reactHookForm
  
    return (
      &lt;Context.Provider value={{ register, errors, control, watch, getValues, setValue, isDisabled, isLoading, isReadOnly }}&gt;
        &lt;form onSubmit={handleSubmit(onSubmit)} className=&quot;w-full&quot;&gt;
          {children}
        &lt;/form&gt;
      &lt;/Context.Provider&gt;
    )
  }
  </code></pre>