title: how to create ref in functional component in react js?
body: <p>I am trying to create ref in functional component .But getting different output as compare to to <code>class based component</code>.</p>
  <p>here is simple <code>class based component</code> .In class based component I am getting correct refs</p>
  <p>here is class based component
  <a href="https://stackblitz.com/edit/react-vh86ou?file=src%2Ftabs.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-vh86ou?file=src%2Ftabs.js</a></p>
  <p>see ref mapping <strong>(correct ref mapping)</strong>
  <a href="https://i.stack.imgur.com/67D2z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/67D2z.png" alt="enter image description here" /></a></p>
  <p>Same mapping I am trying to do with functional component <strong>but getting different output why ?</strong></p>
  <p>here is my function component
  <a href="https://stackblitz.com/edit/react-nagea2?file=src%2FApp.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-nagea2?file=src%2FApp.js</a></p>
  <pre><code>export default function App() {
    useEffect(() =&gt; {
      console.log('---', tabRefs);
    }, []);
    const getTabProps = ({ title, key, selected, tabIndex }) =&gt; ({
      selected,
      children: title,
      key: tabPrefix + key,
      id: tabPrefix + key,
      ref: e =&gt; (tabRefs[tabPrefix + key] = e),
      originalKey: key
    });
  </code></pre>
  <p>I am getting this output
  <a href="https://i.stack.imgur.com/qbQAv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qbQAv.png" alt="enter image description here" /></a></p>
  <p>Why I am getting Ref from <strong>HTMLLIELEMENT</strong> instead of <code>TAB</code> component ?</p>
  <p><strong>Update</strong> :</p>
  <p>I am trying to get <code>offsetWidth</code> still not able to get
  <a href="https://stackblitz.com/edit/react-nagea2?file=src%2FApp.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-nagea2?file=src%2FApp.js</a></p>
  <pre><code>useEffect(() =&gt; {
      console.log('---', tabRefs);
  
      Object.keys(tabRefs).forEach(key =&gt; {
        console.log(key);
        if (tabRefs[key]) {
          const width = tabRefs[key].tab.offsetWidth;
          console.log(width);
        }
      });
    }, []);
  </code></pre>