title: ref.current is always undefined when using ref from forwardRef
body: <pre><code>import React, { useRef } from "react";
  import { render } from "react-dom";
  
  const styles = {
    fontFamily: "sans-serif",
    textAlign: "left"
  };
  
  const Wrapper = () =&gt; {
    const ref = useRef();
    return &lt;App ref={ref} /&gt;;
  };
  
  const App = React.forwardRef(
    ({ placeHolder, onNameSelected, error, onSuggestion }, ref) =&gt; {
      ref.current.setAttribute("he-de-data", "");
  
      return (
        &lt;div style={styles}&gt;
          &lt;h4&gt;Username&lt;/h4&gt;
          &lt;input ref={ref} /&gt;
        &lt;/div&gt;
      );
    }
  );
  
  render(&lt;Wrapper /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>Here's a <a href="https://codesandbox.io/s/react-16-v0kn4" rel="nofollow noreferrer">sandbox</a> that can help you out:</p>
  
  <p>I have the following code, but ref.current is undefined. I need to use the ref from <code>forwardRef</code> and use that ref to add some attribute to the DOM. However, the <code>ref.current</code> is always <strong>undefined</strong>. Is there a particular reason for that?</p>