title: Warning with function components cannot be given refs - even though using forwardRef() with Styled Components
body: <p>I am receiving the warning <code>Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</code>. I'm confused because I am using <code>forwardRef()</code>... and it is working.</p>
  
  <p>I'm attempting to pass my custom Input Element to ReactDatePicker. There are several GitHub issues on this such as this <a href="https://github.com/Hacker0x01/react-datepicker/issues/862" rel="noreferrer">one</a>. But I can't work through this last error while implementing the examples on there that work.</p>
  
  <p>Here is the custom <code>Input</code> element:</p>
  
  <pre><code>interface InputProps extends InputHTMLAttributes&lt;HTMLInputElement&gt; {
    ref?: React.Ref&lt;HTMLInputElement&gt;;
  }
  
  const StyledInput = styled.input&lt;InputProps&gt;`
    box-sizing: border-box;
    // ...
  `;
  
  export const Input: FunctionComponent&lt;InputProps&gt; = (props: InputProps) =&gt; {
    return (
      &lt;&gt;
        &lt;StyledInput {...props}&gt;&lt;/StyledInput&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p>And here is the custom DatePicker with ReactDatePicker where the error occurs:</p>
  
  <pre><code>interface DatePickerProps extends ReactDatePickerProps {
      //... custom props
  }
  
  const StyledDatePicker = styled(ReactDatePicker)`
      //... some CSS
  `;
  
  const CustomInput = forwardRef&lt;HTMLInputElement&gt;((inputProps, ref) =&gt; (
    &lt;Input {...inputProps} ref={ref} /&gt; // &lt;-- error occurs here
  ));
  
  export const DatePicker: FunctionComponent&lt;DatePickerProps&gt; = (props: DatePickerProps) =&gt; {
    const ref = React.createRef&lt;HTMLInputElement&gt;();
  
    return (
      &lt;&gt;
        &lt;StyledDatePicker
          {...props}
          customInput={&lt;CustomInput ref={ref} /&gt;}
        &gt;&lt;/StyledDatePicker&gt;
      &lt;/&gt;
    );
  };
  </code></pre>