Image flicker on custom image gallery

Question

My component loads 2 images and then animates opacity between them to fade into the next image. This is all mediated by a setInterval that changes the index for the images every second.

The issue is that just after the first image transitions into the second, the first image briefly shows again. This only happens on the first index. I have tried this on both Chrome and Firefox and the issue is consistent across both.

Here is my code

import { useEffect } from "react";
import { useState } from "react";
import utils from "../hooks/utils";


const ImageSlider = ({ images, speed = 1000 }) => {
  const [current, setCurrent] = useState(0);

  const styles = {
    slider: {
      position: "relative",
      height: "100vh",
      display: "flex",
    },
    image: {
      width: "100vw",
      objectFit: "cover",
      animationName: "out",
      animationTimingFunction: "ease-in-out",
      animationDuration: `${speed}ms`,
      zIndex: "2",
    },
    image2: {
      width: "100vw",
      objectFit: "cover",
      marginLeft: "-100vw",
      zIndex: "1",
    },
  };

  useEffect(() => {
    const timer = setInterval(() => {
      //please remember this in the future
      setCurrent((current + 1) % images.length);
    }, speed);

    return () => clearInterval(timer);
  });

  if (!Array.isArray(images) || images.length == 0) {
    return null;
  }

  return (
    <>
      <div style={styles.slider}>
        {utils.urlArray(images, "", 1000).map((image, index, array) => (
          <>
            {index === current && (
              <>
                <img
                  style={styles.image}
                  src={image}
                  key={`${index}_${current}_0`}
                />
                <img
                  style={styles.image2}
                  src={array[(index + 1) % array.length]}
                  key={`${index}_${current}_1`}
                />
              </>
            )}
          </>
        ))}
      </div>
    </>
  );
};

export default ImageSlider;

This is the first time I have built a component like this so I can't seem to think what I am doing wrong.

Thanks