title: React Hook Form Error - Type 'UseFormRegister<FormData>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'
body: <p>I am working my way through a React Tutorial Book. At one point, the author showed me how to build a simple Form, which worked fine. Then, he proceeded to upgrade it to a 'React Hook Form'.</p>
  <p>Everything work fine as per the instructions, until the very last line, where he says the following.</p>
  <p><em>&quot;Add a ref property to the input element in the Header component's JSX and set this to the register function from React Hook Form:&quot;</em></p>
  <p>At this exact moment, I run into the following error.</p>
  <pre><code>Type 'UseFormRegister&lt;FormData&gt;' is not assignable to type 'LegacyRef&lt;HTMLInputElement&gt; | undefined'.
    Type 'UseFormRegister&lt;FormData&gt;' is not assignable to type '(instance: HTMLInputElement | null) =&gt; void'.
      Types of parameters 'name' and 'instance' are incompatible.
        Type 'HTMLInputElement | null' is not assignable to type '&quot;search&quot;'.
          Type 'null' is not assignable to type '&quot;search&quot;'.  TS2322
  
      103 |       &lt;form onSubmit={handleSubmit}&gt;
      104 |         &lt;input
    &gt; 105 |         ref={register}
          |         ^
      106 |           name=&quot;search&quot;
      107 |           type=&quot;text&quot;
      108 |           placeholder=&quot;Search...&quot;
  </code></pre>
  <p>The final code is available at this location - <a href="https://github.com/PacktPublishing/ASP.NET-Core-5-and-React-Second-Edition/blob/master/chapter-06/finish/frontend/src/Header.tsx" rel="noreferrer">https://github.com/PacktPublishing/ASP.NET-Core-5-and-React-Second-Edition/blob/master/chapter-06/finish/frontend/src/Header.tsx</a></p>
  <p>and I have compared my code to be identical, which I put below.</p>
  <pre><code>import React from 'react';
  import { useSearchParams } from 'react-router-dom';
  import { useForm } from 'react-hook-form';
  
  type FormData = {
    search: string;
  };
  
  export const Header = () =&gt; {
    const { register } = useForm&lt;FormData&gt;();
    const [searchParams] = useSearchParams();
    const criteria = searchParams.get('criteria') || '';
    const handleSubmit = (e: React.FormEvent) =&gt; {
      e.preventDefault();
    };
  
    return (
      &lt;div&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;input
          ref={register}
            name=&quot;search&quot;
            type=&quot;text&quot;
            placeholder=&quot;Search...&quot;
            defaultValue={criteria}
          /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>I am still learning my way around React and TypeScript. I understand the error is something about a type mismatch. Specifically the 'search' cannot be null. But beyond that I have no clue how to fix this.</p>
  <p>I have looked at the following existing questions. They all seem to be discussing this but not with React Hook Form.</p>
  <p><a href="https://stackoverflow.com/questions/48488701/type-null-is-not-assignable-to-type-htmlinputelement-reactjs">Type &#39;null&#39; is not assignable to type &#39;HTMLInputElement&#39; ReactJs</a></p>
  <p><a href="https://stackoverflow.com/questions/63520680/argument-of-type-htmlelement-null-is-not-assignable-to-parameter-of-type-el">Argument of type &#39;HTMLElement | null&#39; is not assignable to parameter of type &#39;Element&#39;. Type &#39;null&#39; is not assignable to type &#39;Element&#39;.ts(2345)</a></p>
  <p><a href="https://stackoverflow.com/questions/66963289/useref-typescript-not-assignable-to-type-legacyrefhtmldivelement">useRef TypeScript - not assignable to type LegacyRef&lt;HTMLDivElement&gt;</a></p>