title: React UseRef and forwardRef issue for an element position
body: <p>I have successfully connected my component <code>Details.js</code> in order to manage the state out of the component itself, these are the steps:</p>
  <p>You can see the demo <a href="https://codesandbox.io/s/black-fog-hd8pn" rel="nofollow noreferrer">here</a></p>
  <p><strong>Details.js</strong></p>
  <pre><code>import React, { useState, useEffect, useRef, ref, useImperativeHandle, forwardRef } from &quot;react&quot;;
  
    const cleanValue = () =&gt; {
      setDataHomeTeam([]);
      setDataAwayTeam([]);
    };
  
    useImperativeHandle(fowardedRef, () =&gt; {
      return {
        cleanValue: cleanValue
      };
    });
  
  const ConnectedDetails = connect(
    mapStateToProps,
    mapDispatchToProps,
    null
  )(Details);
  
  export default forwardRef((props, ref) =&gt; {
    return &lt;ConnectedDetails {...props} fowardedRef={ref} /&gt;;
  });
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>const ref = useRef();  
  &lt;button onClick={() =&gt; ref.current.cleanValue()} type=&quot;button&quot;&gt;Reset&lt;/button&gt;
  &lt;Details ref={ref} /&gt;
  </code></pre>
  <p>It works ,the demo is <a href="https://codesandbox.io/s/black-fog-hd8pn" rel="nofollow noreferrer">here</a>.</p>
  <p>My problem is when i move this element from <strong>App.js</strong> to <strong>Leagues.js</strong> as you can see in the demo ( there are both cases )</p>
  <p><strong>Leagues.js</strong></p>
  <p>Line 71</p>
  <pre><code>&lt;button onClick={() =&gt; ref.current.cleanValue()} type=&quot;button&quot;&gt;Reset&lt;/button&gt;
  </code></pre>
  <p>i get this error when i click on it =&gt; <em>TypeError Cannot read property 'cleanValue' of undefined</em></p>
  <p>Is it possible ? If yes, what am i doing wrong and how can i fix that?</p>