title: useRef with typescript on custom input element
body: <p>I am struggling in using useRef on an <code>input</code> with typescript. I've checked many links like <a href="https://stackoverflow.com/questions/33796267/how-to-use-refs-in-react-with-typescript">this one</a> but I am still getting the same error.</p>
  <pre><code>const MainHeader: React.FC = () =&gt; {
  
  const InputStyled = styled(Input)`
    // some basic css
  `;
  
  const searchElement = useRef&lt;HTMLInputElement&gt;(null);
  
  return (
    &lt;&gt;
      &lt;InputStyled full ref={searchElement} type=&quot;search&quot; /&gt;
    &lt;/&gt;
  );
  }
  
  </code></pre>
  <p>My <code>Input</code> component :</p>
  <pre><code>export type SearchFieldProps = React.InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; {
    full?: boolean;
    medium?: boolean;
    light?: boolean;
  };
  
  const SearchField = styled.input&lt;SearchFieldProps&gt;`
    // css rules here
  `;
  
  const Input: React.FC&lt;SearchFieldProps&gt; = (props) =&gt; &lt;SearchField {...props} /&gt;;
  
  export default Input;
  </code></pre>
  <p>I am not doing anything exotic here I think, but it returns :</p>
  <pre><code>No overload matches this call.
    Overload 1 of 2, '(props: Pick&lt;Pick&lt;PropsWithChildren&lt;SearchFieldProps&gt;, &quot;form&quot; | &quot;slot&quot; | &quot;style&quot; | &quot;title&quot; | &quot;pattern&quot; | &quot;type&quot; | &quot;name&quot; | &quot;defaultChecked&quot; | ... 279 more ... | &quot;light&quot;&gt; &amp; Partial&lt;...&gt;, &quot;form&quot; | ... 286 more ... | &quot;light&quot;&gt; &amp; { ...; } &amp; { ...; }): ReactElement&lt;...&gt;', gave the following error.
      Type '{ ref: RefObject&lt;HTMLInputElement&gt;; full: true; placeholder: string | undefined; type: string; }' is not assignable to type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;PropsWithChildren&lt;SearchFieldProps&gt;, &quot;form&quot; | &quot;slot&quot; | &quot;style&quot; | &quot;title&quot; | &quot;pattern&quot; | ... 282 more ... | &quot;light&quot;&gt; &amp; Partial&lt;...&gt;, &quot;form&quot; | ... 286 more ... | &quot;light&quot;&gt; &amp; { ...; } &amp; { ...; }'.
        Property 'ref' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;PropsWithChildren&lt;SearchFieldProps&gt;, &quot;form&quot; | &quot;slot&quot; | &quot;style&quot; | &quot;title&quot; | &quot;pattern&quot; | ... 282 more ... | &quot;light&quot;&gt; &amp; Partial&lt;...&gt;, &quot;form&quot; | ... 286 more ... | &quot;light&quot;&gt; &amp; { ...; } &amp; { ...; }'.
    Overload 2 of 2, '(props: StyledComponentPropsWithAs&lt;FC&lt;SearchFieldProps&gt;, any, {}, never, FC&lt;SearchFieldProps&gt;&gt;): ReactElement&lt;...&gt;', gave the following error.
      Type '{ ref: RefObject&lt;HTMLInputElement&gt;; full: true; placeholder: string | undefined; type: string; }' is not assignable to type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;PropsWithChildren&lt;SearchFieldProps&gt;, &quot;form&quot; | &quot;slot&quot; | &quot;style&quot; | &quot;title&quot; | &quot;pattern&quot; | ... 282 more ... | &quot;light&quot;&gt; &amp; Partial&lt;...&gt;, &quot;form&quot; | ... 286 more ... | &quot;light&quot;&gt; &amp; { ...; } &amp; { ...; }'.
        Property 'ref' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;PropsWithChildren&lt;SearchFieldProps&gt;, &quot;form&quot; | &quot;slot&quot; | &quot;style&quot; | &quot;title&quot; | &quot;pattern&quot; | ... 282 more ... | &quot;light&quot;&gt; &amp; Partial&lt;...&gt;, &quot;form&quot; | ... 286 more ... | &quot;light&quot;&gt; &amp; { ...; } &amp; { ...; }'.
  </code></pre>
  <p>Any idea/advice is welcome !</p>
  <p>Thanks</p>