title: React nested forwardRef
body: <p>In my React (w/ typescript) application I've created a form using react-hook-form to manage all the logic of it.</p>
  <p>I've then customised the select element with some css and other things. But, for the sake of question's simplicity, here the barebone component:</p>
  <pre><code>import { forwardRef } from 'react';
  
  type Props = React.DetailedHTMLProps&lt;React.InputHTMLAttributes&lt;HTMLSelectElement&gt;, HTMLSelectElement&gt;;
  
  const Select = forwardRef&lt;HTMLSelectElement, Props&gt;((props, ref) =&gt; {
      return (
          &lt;select ref={ref} {...props}&gt;
              &lt;option value=&quot;&quot;&gt;...&lt;/option&gt;
              {props.children}
          &lt;/select&gt;
      );
  });
  
  export default Select;
  
  </code></pre>
  <p>I've then defined another component that &quot;specialise&quot; the previous one, as:</p>
  <pre><code>import { forwardRef } from 'react';
  
  import Select from './select';
  
  type Props = React.DetailedHTMLProps&lt;React.InputHTMLAttributes&lt;HTMLSelectElement&gt;, HTMLSelectElement&gt; &amp; { label: string; errors?: string };
  
  const SelectWitLargeData = forwardRef&lt;HTMLSelectElement, Props&gt;((props, ref) =&gt; {
      return (
          &lt;Select ref={ref} {...props}&gt;
             ...large amount of options
          &lt;/Select&gt;
      );
  });
  
  export default SelectWitLargeData;
  </code></pre>
  <p>The problem is that the compiler gives me an error on &lt;Select <strong>ref={ref}</strong> (&lt;- here) ...&gt;</p>
  <pre><code>Type 'ForwardedRef&lt;HTMLSelectElement&gt; | LegacyRef&lt;HTMLSelectElement&gt;' is not assignable to type 'Ref&lt;HTMLSelectElement&gt;'.
    Type 'string' is not assignable to type 'Ref&lt;HTMLSelectElement&gt;'.ts(2322)
  index.d.ts(140, 9): The expected type comes from property 'ref' which is declared here on 
  
  type 'IntrinsicAttributes &amp; Pick&lt;Props, &quot;label&quot; | &quot;key&quot; | keyof InputHTMLAttributes&lt;HTMLSelectElement&gt; | &quot;errors&quot;&gt; &amp; RefAttributes&lt;...&gt;'
  
  (JSX attribute) RefAttributes&lt;HTMLSelectElement&gt;.ref?: Ref&lt;HTMLSelectElement&gt;
  </code></pre>
  <p>I've search for solutions online, and found many suggestions, but none of these work.</p>
  <p>Any help is appreciated
  Thanks in advance!</p>
  <p><strong>Edit</strong>
  Here's an example form to consume the components</p>
  <pre><code>import { useEffect } from 'react';
  import { useForm } from 'react-hook-form';
  
  import Select from '@components/select';
  import SelectWithLargeData from '@components/select-with-large-data';
  
  type Form = {
      email: string;
      state: string;
      country: string;
  };
  
  const Address: React.FC = () =&gt; {
      const { handleSubmit, register, setValue } = useForm&lt;Form&gt;();
  
      useEffect(() =&gt; {
          setValue('state', 'AL');
      }, [setValue]);
  
      const onSubmit = async (input: Form) =&gt; {
          console.log(input);
      };
  
      return (
          &lt;&gt;
              &lt;form onSubmit={handleSubmit(onSubmit)} className=&quot;space-y-10&quot;&gt;
                  &lt;input type=&quot;email&quot; {...register('email', { required: true })} /&gt;
  
                  &lt;SelectWithLargeData label=&quot;Provincia&quot; {...register('state', { required: true })} /&gt;
  
                  &lt;Select label=&quot;Stato&quot; {...register('country', { required: true })}&gt;
                      &lt;option value=&quot;IT&quot;&gt;Italia&lt;/option&gt;
                  &lt;/Select&gt;
              &lt;/form&gt;
          &lt;/&gt;
      );
  };
  
  export default Address;
  </code></pre>
  <p><strong>Edit 2</strong>
  <a href="https://codesandbox.io/s/withered-rain-w9ej4" rel="nofollow noreferrer">https://codesandbox.io/s/withered-rain-w9ej4</a></p>
  <hr />