React Carousel Animation Breaking When Item Transition Duration is Set

Question

I'm working on a carousel component that has lots of child components inside it. When the user clicks spin, the carousel component is translated along the x-axis for 6s. Also, during this animation, I am calculating the child item that is currently in the middle and applying some css to it. My issue arises when I apply a style with a duration that is more than 0ms. When the duration is 0ms, the animation works correctly, however, when the duration is set to, for example, 75ms, the carousel component animation doesn't work as intended (doesnt last 6s anymore but more like 0.5s).

`Here's a simplified version of my component structure:

const CaseCarousel = ({ items }) => {
  // ... other state and logic

  return (
    <div 
      ref={carouselRef} 
      className="carousel"
      style={{
        transition: "transform 6s cubic-bezier(0, 0.49, 0.1, 1)",
        transform: `translate3d(${animationDistance}px, 0, 0)`
      }}
    >
      {items.map((item) => (
        <CarouselItem key={item.id} {...item} isMiddle={index === Math.round(items.length / 2) - 1 + middleItem}/>
      ))}
    </div>
  );
};

const CarouselItem: React.FC<CarouselItemProps> = ({ imagePath, isMiddle, id }) => {
  return (
    <div
      className={`relative flex flex-col items-center justify-center opacity-80 duration-75 ease-in-out will-change-transform ${
        isMiddle ? "scale-110" : ""
      } w-[176px] h-[176px]`}
    >
      <div className="relative flex justify-center items-center h-full w-full">
        <Image src={imagePath} alt={"case"} width={140} height={140} />
      </div>
      <div
        className="absolute top-0 right-0 w-full h-full opacity-30 z-[-1]"
        style={{
          background:
            "radial-gradient(50% 50% at 50% 50%, rgb(235, 76, 75) 0%, rgba(74, 34, 34, 0.2) 100%)",
        }}
      ></div>
    </div>
  );
};
};```