title: How to export forwardRef with ForwardRefRenderFunction
body: <p>I'm having a component which belongs to a UI library, lets call it Input component.
  When using this library to call Input, there are many types I can called. For example</p>
  <pre><code>&lt;Input /&gt;
  &lt;Input.TextArea /&gt;
  &lt;Input.Search /&gt;
  </code></pre>
  <p>Now I want to write a wrapper to this Input component, so I write like this</p>
  <pre><code>type InputWrapperComponent = FC&lt;InputProps&gt; &amp; {
    Search: typeof Input.Search;
    TextArea: typeof Input.TextArea;
  };
  
  const InputWrapper: InputWrapperComponent = (props) =&gt; {
    // make some minor changes here
  }
  
  InputWrapper.Search = Input.Search;
  InputWrapper.TextArea = Input.TextArea;
  export default InputWrapper;
  </code></pre>
  <p>in <strong>index.tsx</strong></p>
  <pre><code>export { default as InputWrapper } from './input';
  </code></pre>
  <p>Then I can use them like this:</p>
  <pre><code>&lt;InputWrapper /&gt;. --&gt; Works
  &lt;InputWrapper.TextArea /&gt;. --&gt; Works
  &lt;InputWrapper.Search /&gt;. --&gt; Works
  </code></pre>
  <p>But by doing this, I cannot use <strong>ref</strong> methods of the original UI library ( something like <code>inputRef.current.focus()</code> ). that's why I use <strong>forwardRef</strong> and <strong>ForwardRefRenderFunction</strong> like this</p>
  <pre><code>type InputWrapperComponent = ForwardRefRenderFunction&lt;HTMLInputElement, InputProps&gt; &amp; {
    Search: typeof Input.Search;
    TextArea: typeof Input.TextArea;
  };
  
  const InputWrapper: InputWrapperComponent = (props, ref) =&gt; {
    // make some minor changes here and add the ref to the input
  }
  
  InputWrapper.Search = Input.Search;
  InputWrapper.TextArea = Input.TextArea;
  export default forwardRef(InputWrapper);
  </code></pre>
  <p>By changing to this, I can pass the ref to the original UI library and can use its original methods. However, my problem right now is when I change to <strong>forwardRef</strong> and <strong>ForwardRefRenderFunction</strong>, I cannot call <strong>TextArea</strong> and <strong>Search</strong> anymore</p>
  <pre><code>&lt;InputWrapper /&gt;. --&gt; Works
  &lt;InputWrapper.TextArea /&gt;. --&gt; Error
  &lt;InputWrapper.Search /&gt;. --&gt; Error
  </code></pre>
  <p>This is the error:</p>
  <pre><code>Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  </code></pre>
  <p>Anyone can give me some guidance on this? Thanks</p>