title: How to create a ref using Typescript and styled-components
body: <p>I'm trying to add a <strong>ref</strong> to React component like this:</p>
  
  <pre><code>const Dashboard: React.FC = () =&gt; {
    const [headerHeight, setHeaderHeight] = useState(0);
  
    const headerRef = React.createRef&lt;HTMLInputElement&gt;();
    useEffect(() =&gt; {
      // @ts-ignore: Object is possibly 'null'
      setHeaderHeight(ref.current.clientHeight)
    });
  
    return (
      &lt;Root&gt;
        &lt;Header ref={headerRef} /&gt;
  
        &lt;div&gt;other contents&lt;/div&gt;             
      &lt;/Root&gt;
    );
  };
  </code></pre>
  
  <p><code>&lt;Header /&gt;</code> is a simple <code>React.FC</code>.
  TS gives an error saying:</p>
  
  <blockquote>
    <p>Type '{ ref: RefObject; }' is not assignable to type 'IntrinsicAttributes &amp; { children?: ReactNode; }'.
      Property 'ref' does not exist on type 'IntrinsicAttributes &amp; { children?: ReactNode; }'</p>
  </blockquote>
  
  <p>How can I overcome this issue?</p>