title: React useMeasure not working with nextJS?
body: <p>I'm currently trying to animate a div so that it slides from bottom to top inside a card.</p>
  <p>The useMeasure hook is supposed to give me the height of the wrapper through the handler I attached to it : <code>&lt;div className=&quot;desc-wrapper&quot; {...bind}&gt;</code></p>
  <p>Then I am supposed to set the top offset of an absolutely positionned div to the height of its parent and update this value to animate it.</p>
  <p>The problem is that when logging the bounds returned by the useMeasure() hook, all the values are at zero...</p>
  <p>Here is a link to production exemple of the panel not being slided down because detected height of parent is 0 : <a href="https://next-portfolio-41pk0s1nc.vercel.app/page-projects" rel="nofollow noreferrer">https://next-portfolio-41pk0s1nc.vercel.app/page-projects</a></p>
  <p>The card component is called Project, here is the code :</p>
  <pre><code>import React, { useEffect, useState } from 'react'
  import './project.scss'
  import useMeasure from 'react-use-measure';
  import { useSpring, animated } from &quot;react-spring&quot;;
  
  
  const Project = (projectData, key) =&gt; {
      const { project } = projectData
  
      const [open, toggle] = useState(false)
      const [bind, bounds] = useMeasure()
      const props = useSpring({ top: open ? 0 : bounds.height })
  
      useEffect(() =&gt; {
          console.log(bounds)
      })
  
      return (
          &lt;div className=&quot;project-container&quot;&gt;
              &lt;div className=&quot;img-wrapper&quot; style={{ background: `url('${project.illustrationPath}') no- 
                repeat center`, backgroundSize: project.portrait ? 'contain' : 'cover' }}&gt;
              &lt;/div&gt;
              &lt;div className=&quot;desc-wrapper&quot; {...bind} &gt;
                  &lt;h2 className=&quot;titre&quot;&gt;{project.projectName}&lt;/h2&gt;
                  &lt;span className=&quot;description&quot;&gt;{project.description}&lt;/span&gt;
                  &lt;animated.div className=&quot;tags-wrapper&quot; style={{ top: props.top }}&gt;
  
                  &lt;/animated.div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default Project;
  </code></pre>
  <p>Is this a design issue from nextJS or am I doing something wrong ? Thanks</p>