Div does not follow the mouse-CodePudding

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?

CSS

.dropdown1 {
  position: absolute;
  left: 150px;
  top: 10px;
  background: #2b4557;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
}

JSX

import "./styles.css";
import { useRef } from "react";

export default function App() {
  const descBox = useRef(null);
  const handleMove = (e) => {
    console.log(e.clientX, e.clientY);
    descBox.current.style.left = e.clientX;
    descBox.current.style.top = e.clientY;
  };
  return (
    <div
      onm ouseMove={handleMove}
      style={{ height: "300px", width: "100%", backgroundColor: "red" }}
    >
      <div className="dropdown1" ref={descBox}>
        123asdfsfdafffasdfasfdsajkj
      </div>
    </div>
  );
}

Please run the code in

CodePudding user response：

You forgot the unit bro

descBox.current.style.left = `${e.clientX}px`;
descBox.current.style.top = `${e.clientY}px`;