When clicking on the respective icons to move from left to right the image becomes white, moving the whole set of images, and not image by image, and the transition also moves the icons not blocked to the side margins.

const Carousel: React.FC = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [loadedIndexes, setLoadedIndexes] = useState<number[]>([0]);
  const images = [
    '/image1.jpg',
    '/image2.jpg',
    '/image3.jpg'
  ];

  const updateIndex = (newIndex: number) => {
    if (newIndex < 0) {
      newIndex = images.length - 1;
    } else if (newIndex >= images.length) {
      newIndex = 0;
    }
    setActiveIndex(newIndex);

    if (!loadedIndexes.includes(newIndex)) {
      setLoadedIndexes([...loadedIndexes, newIndex]);
    }
  };

  useEffect(() => {
    const interval = setInterval(() => {
      updateIndex(activeIndex + 1);
    }, 3000);
    return () => {
      clearInterval(interval);
    };
  }, [activeIndex]);

I redid the code several times but I still get the same behavior.