onMouseMove + useState lag on custom carousel

I'm new at react and I'm having some trouble with useState renders with onMouseMove event.

I'm building a custom carousel as a training and I have the following code:

import { ReactNode, useState } from "react";

interface CarouselProps {
  children: ReactNode;
}

const Carousel = ({
  children,
}: CarouselProps): JSX.Element => {

  const [isMouseLocked, setIsMouseLocked] = useState(false);
  const [position, setPosition] = useState(0);
  const [initialPosition, setInicialPosition] = useState(0);
  const [lastPosition, setLastPosition] = useState(0);

  function handleMouseDown(event: React.MouseEvent): void {
    event.preventDefault();
    setIsMouseLocked(true);
    setInicialPosition(event.clientX);
  }

  function handleMouseMove(event: React.MouseEvent): void {
    if (isMouseLocked) {
      const travelDistance = event.clientX - initialPosition;
      setPosition(travelDistance + lastPosition);
    }
  }

  function handleMouseUp(event: React.MouseEvent): void {
    event.preventDefault();
    setLastPosition(position);
    setIsMouseLocked(false);
  }

  return (
    <div
      className="carousel"
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
    >
      <div
        style={{ transform: `translateX(${position * 2}px)` }}
      >
        {children}
      </div>
    </div>
  );
};

export default Carousel;

The interactions are working fine, the problem that I have is since I'm using useState with onMouseMove to track the position that's being used on the style translateX, the component renders a lot and causes lag. I tried using let instead of state, but then the componente doens't move at all. Is there a way to avoid a lot of renders or at least remove the lag on this situation, and still make the translateX update so the carousel move?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum