title: Div does not follow the mouse
body: <p>In the following code, I hope my div will follow my mouse in red background but it does not, what's the reason for that?</p>
  <p>CSS</p>
  <pre><code>.dropdown1 {
    position: absolute;
    left: 150px;
    top: 10px;
    background: #2b4557;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
  }
  </code></pre>
  <p>JSX</p>
  <pre><code>import &quot;./styles.css&quot;;
  import { useRef } from &quot;react&quot;;
  
  export default function App() {
    const descBox = useRef(null);
    const handleMove = (e) =&gt; {
      console.log(e.clientX, e.clientY);
      descBox.current.style.left = e.clientX;
      descBox.current.style.top = e.clientY;
    };
    return (
      &lt;div
        onMouseMove={handleMove}
        style={{ height: &quot;300px&quot;, width: &quot;100%&quot;, backgroundColor: &quot;red&quot; }}
      &gt;
        &lt;div className=&quot;dropdown1&quot; ref={descBox}&gt;
          123asdfsfdafffasdfasfdsajkj
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Please run the code in <a href="https://codesandbox.io/s/icy-wave-q0bfm1?file=/src/App.js:0-526" rel="nofollow noreferrer">Codesandbox</a></p>
  <p>And here's a screenshot:
  <a href="https://i.stack.imgur.com/NJyrJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NJyrJ.png" alt="enter image description here" /></a></p>