title: React refs: Cannot read property 'focus' of null
body: <p>I have this situation in my app: <a href="https://codesandbox.io/s/14mq9969j3" rel="nofollow noreferrer">https://codesandbox.io/s/14mq9969j3</a></p>
  
  <p>My goal is to be able to focus on input inside <code>GrandChildInput</code> component by clicking on div in <code>ChildInput</code>. However, when <code>ChildInput</code> gets rendered, the value of <code>this.childRef.current</code> is <code>null</code>, and it remains so until I manually focus on input by clicking into it. After that, the value of <code>current</code> is being assigned. </p>
  
  <p>You can track this transformation in the console. The <code>this.childRef.current</code>log appears once, but its value changes after manually focusing on input by clicking on it.</p>
  
  <p>My end goal is to have the StyledGrandChildInput work this way, but as an intermediary step, I am trying to make the unstyled component work. I am able to achieve this result (with unstyled component) in my local project with:</p>
  
  <ul>
  <li>React 16.4.2</li>
  <li>Styled-Components 3.4.2</li>
  </ul>
  
  <p>But when it comes to working in CodeSandbox with the versions that are installed in the project through the link above, for some reason even focusing on non-styled GrandChildInput component does not work.</p>
  
  <p>How can I make the app focus on GrandChildInput component when I click on <code>div</code> of ChildInput?</p>