title: React hook useRef not working with styled-components and typescript
body: <p>I've some problem using the <code>useRef</code> hook with a styled component.</p>
  <p>Linter alerts me that <code>Object is possibly 'null'</code> inside the didMount <code>useEffect</code>. Any idea about this?</p>
  <h3>This is not a duplicate for 2 reason:</h3>
  <ul>
  <li>The old answer refers to the <code>ref</code> used in a class component, that was the only way to use it before React hooks,</li>
  <li>The <code>innerRef</code> props isn't supported anymore in the current version of styled components.</li>
  </ul>
  <p>Here's a sample snippet of my component:</p>
  <pre><code>import React, { useRef, useEffect } from 'react';
  import styled from 'styled-components';
  
  const StyledInput = styled.input`
    background: transparent;
  `
  
  const MyForm = () =&gt; {
    const inputRef = useRef(null);
    
    useEffect(() =&gt; {
      if (inputRef &amp;&amp; inputRef.current) {
        inputRef.current.focus(); //Object is possibly 'null'
      }
    }, []);
  
    return (
      &lt;StyledInput ref={inputRef}/&gt;
    );
  }
  </code></pre>