title: How to properly forward a ref to a material-ui component from a functional component
body: <p>I'm using the following packages to create an autocomplete solution for an application I'm working on:</p>
  
  <ul>
  <li><a href="https://material-ui.com/api/textarea-autosize/" rel="nofollow noreferrer">Material UI 4</a></li>
  <li><a href="https://github.com/yury-dymov/react-autocomplete-input/blob/master/src/AutoCompleteTextField.js" rel="nofollow noreferrer">react-autocomplete-input</a> </li>
  </ul>
  
  <p>I'm trying to use the <code>Component</code> prop on the react-autocomplete-input element by passing in the material-ui <code>TextareaAutosize</code> component.  </p>
  
  <p><strong>Directly passing in TextareaAutosize from MUI</strong></p>
  
  <pre><code>import {TextareaAutosize} from '@material-ui/core';
  &lt;AutocompleteInput Component={TextareaAutosize} /&gt;
  </code></pre>
  
  <p>This works, however I don't have any control over the props it gets. </p>
  
  <p><strong>Through a custom component so I can add props</strong></p>
  
  <pre><code>const CustomTextarea = forwardRef((props, ref) =&gt; (
    // If I don't forward the ref I get an error...
    &lt;TextareaAutosize
      placeholder="Material-ui through custom component..."
      ref={ref}
    /&gt;
  ));
  
  &lt;AutocompleteInput Component={CustomTextarea} /&gt;
  </code></pre>
  
  <p>This stops the autocomplete from working altogether.  However, the placeholder still shows properly which means the props are at least making it through.</p>
  
  <p>You can see all the examples in my sandbox below.</p>
  
  <p><strong>Examples:</strong>
  <a href="https://codesandbox.io/s/frosty-wildflower-48iyd" rel="nofollow noreferrer">https://codesandbox.io/s/frosty-wildflower-48iyd</a></p>