title: Change Formik to react-hook-form v7
body: <p>I am refactoring a Formik form to react-hook-form v7. The Formik form has this structure:</p>
  <pre><code>&lt;FormikProvider value={form}&gt;
   &lt;Form&gt;
   &lt;Field
      component={FighterInput}
      fighterAvailability={fighterAvailabilityStatus}
   /&gt;
   &lt;StandardButton
    type=&quot;submit&quot;
   &gt;
   &lt;/StandardButton&gt;
  &lt;/Form&gt;
  &lt;/FormikProvider&gt;
  </code></pre>
  <p>The FighterInput component is a component which has an input field and a function that renders a div based on fighter availability.</p>
  <p>I need to get the typed in value character by character because a useEffect triggers other functions so I need to use react-hook-form watch or something else that let's me grab every character that is typed in to the {FighterInput} component, this is currently achieved with Formiks context values, but I need to do this in react-hook-form.</p>
  <p>I've been able to get the value using watch with the following approach:</p>
  <pre><code>const fighter = watch('fighterInput');
  
  &lt;form&gt;
        &lt;input {...register(&quot;fighterInput&quot;)} /&gt;
  &lt;/form&gt;
  </code></pre>
  <p>But this is not using the {FighterInput} component. The {FighterInput} component accepts props and returns an an input field. It also has some functions that renders a div based on conditionals set in the useEffect in the main component where I want to use react-hook-form and import {FighterInput}</p>
  <p>How can I transform the Formik form with the above structure to achieve the same thing using react-hook-form v7 and render the {FighterInput} component while being able to grab every character on-the-fly as it is being typed into the input of {FighterInput} ?</p>
  <pre><code>&lt;Controller
    control={control}
    name=&quot;test&quot;
    render={({
      field: { onChange, onBlur, value, name, ref },
      fieldState: { invalid, isTouched, isDirty, error },
      formState,
    }) =&gt; (
      &lt;FighterInput
        onChange={onChange} // send value to hook form
        checked={value}
        inputRef={ref}
        {...register(&quot;fighterInput&quot;)} // not working
  
      /&gt;
    )}
  /&gt;
  </code></pre>
  <p>In addition to being able to watch the input, I need to be able to access form values in my FighterInput component as well and wondering how I can do that, am I supposed to use react-hook-forms useFormContext or FormProvider?</p>