mouse-component.tsx

export const useMousePosition = () => {
  const [mousePosition, setMousePosition] = React.useState({
    x: null,
    y: null,
  });

  React.useEffect(() => {
    const mouseMoveHandler = (event: { clientX: number; clientY: number }) => {
      const { clientX, clientY } = event;
      setMousePosition({ x: clientX, y: clientY });
    };
    document.addEventListener("mousemove", mouseMoveHandler);

    return () => {
      document.removeEventListener("mousemove", mouseMoveHandler);
    };
  }, []);

  return mousePosition;
};

export const DTSliderMouse = () => {
  const { x, y } = useMousePosition();
  const { windowWidth } = React.useContext(DTScreenContext);
  const middle = windowWidth / 2;

  return (
    <div style={{ left: `${x}px`, top: `${y}px` }} className="slider-cursor">
      {x < middle ? <CaretLeftIcon /> : <CaretRightIcon />}
    </div>
  );
};