title: useRef() Hook on a custom component
body: <p>I'm trying do create a Navigation Bar that when the user click on one of the links, the page scrolls to some section. In the code above, each element is a section of my page:</p>
  
  <pre><code>    &lt;Navbar scrollFunc={scrollToRef} /&gt;      
      &lt;Mainlogo ref={mainLogoRef} /&gt;
      &lt;Sales  ref={salesRef} /&gt;
      &lt;Introduction ref={introductionRef} /&gt;
      &lt;Blog ref={blogRef} /&gt;
      &lt;Footer /&gt;
  
  </code></pre>
  
  <p>The 'refs' was declares as folowing, using the useRef hook:</p>
  
  <pre><code>  const mainLogoRef = useRef(null)
    const salesRef = useRef(null)
    const introductionRef = useRef(null)
    const blogRef = useRef(null)
  
  </code></pre>
  
  <p>The function i'm using to scroll is the folowing:</p>
  
  <pre><code>  const scrollToRef = ref =&gt; {
      window.scrollTo({ top: ref.current.offsetTop, behavior: "smooth" })
    }
  
  </code></pre>
  
  <p>The thing is that the 'current' key is always undefined. When i do something like that:</p>
  
  <pre><code>&lt;div ref={salesRef}&gt; &lt;Sales  /&gt;&lt;div&gt;
  
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;section ref={salesRef}&gt; &lt;Sales  /&gt;&lt;section&gt;
  
  </code></pre>
  
  <p>Things works just fine. I'm assuming that 'ref' works only on html 'pure' tags. Is there any way to use 'useRef' hook in a custom component?</p>
  
  <p>disclaimer: Sorry for bad english, i'm not a native speaker.</p>