title: React forwardref current is always null
body: <p>So, I'm trying to implement the react forwardref example for my component, as I want to control a scrollbar inside.</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>const MessagesFC = React.forwardRef((props, ref) =&gt; {       
      return &lt;Flex
          className={"Messages"}
          direction={"Column"}
          ref={ref}&gt;
          {messages}
      &lt;/Flex&gt;
  });
  
  const scrollDivRef = React.createRef&lt;any&gt;();
  
  React.useEffect(() =&gt; {
      scrollDivRef.current?.scrollIntoView({ behavior: "smooth"})
  }, [ scrollDivRef, chatRoom.messages ])
  </code></pre>
  
  <p>Inside my return(), the component is added like this:</p>
  
  <pre><code>&lt;MessagesFC 
      ref={scrollDivRef}/&gt;
  </code></pre>
  
  <p>Seems to be setup just like in the example.</p>
  
  <p>However, when executing this code, the scrollDivRef.current is always undefined.</p>
  
  <p>So, where did I go wrong?</p>
  
  <p>Screenshot of my code:</p>
  
  <p><a href="https://i.stack.imgur.com/YfIgp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YfIgp.png" alt="enter image description here"></a></p>