I am building out a component which cycles through images on a timer.

I have an array of images which gets mapped into my component. The images check for an equality and if it is met an additional class is added.

        {videoOptions.imgPaths.map((path, index) => {
          return (
            <img
              key={index}
              src={path}
              className={`${style["panning-image"]} ${
                videoOptions.currentIndex === index ? style["active"] : ""
              }`}
            />
          );
        })}

The initial index is set to null so none of the images have the active class. When a button is clicked I trigger this function:

  function startSlideshow(
    isCursorOnImage = false,
    elapsedTime = 0,
    updateSubtitle,
    updateProgressBar
  ) {
    const images = document.querySelectorAll(`.${style["panning-image"]}`);
    if (images.length > 0) {
      setVideoOptions({
        ...videoOptions,
        currentIndex: 0,
        isPlaying: true,
      });

    setInterval(goToNextImage, remainingDuration * 1000);

    }
  }

When this function is called the image with index 0 is active. Now the function I am having trouble with is goToNextImage:

  function goToNextImage() {
    const nextIndex = getNextIndex(
      videoOptions.currentIndex,
      videoOptions.imgPaths.length
    );

    console.log(nextIndex);

    setVideoOptions({
      ...videoOptions,
      currentIndex: nextIndex,
    });
  }

The function is console logging the correct value for nextIndex however after setting my state I don’t see the second element become active.