drag an image with the cursor using react

i have a div with a background image and i want to drag the image with the cursor within the bounds on the div, i set the background position to a variable and then added an onmousemove event to the div where i set the variable to the cursor position

const [mousePos, setMousePos] = useState({});
const [imageCenter, setImageCenter] = useState(`center`);

useEffect(() => {
const handleMouseMove = (event) => {
  setMousePos({ x: event.clientX, y: event.clientY });
};

window.addEventListener('mousemove', handleMouseMove);

return () => {
  window.removeEventListener(
    'mousemove',
    handleMouseMove
  );
};
}, []);

the div

<div style={{height:`100%`,width:`100vw`,background:`url(${displayImage}) no-repeat ${imageCenter} / cover`,position:`relative`}} onMouseMove={() => setImageCenter(`${mousePos.x}px ${mousePos.y}px`)
      } onMouseOut={() => setImageCenter(`center`)}>
      </div>

but when i drag the image the cursor is at the top left corner of the image, i want to make it so that focal point of the drag is the cursor position, the image is dragged by the cursor position not by the top left corner, how would i do that and would it be easier to do it using an html inside a