React Image Preloading with a timed Image Switcher are delayed longer than they should

Question

I have seen many ways to preload images in react, and have had success with a few different solutions.. but I am having a bit of a glitch with this component switching images.

There is an array of 19 images that are stored in my /public folder that are supposed to switch ever 500ms. To do this I am preloading all 19 images before the setTimeout function starts switching them.

I started by preloading them in the /public/index.html file like so... but it did not really work.

<link rel="preload" href="%PUBLIC_URL%/Img1.jpg" as="image" />

So then I decided to try another method by creating promises and loading them into the cache before starting the setTimeout function. This is in the code below.

The issue is... both methods are producing the same effect. Sometimes the image switches at 500ms, sometimes its about 2 seconds.

Here is the demo link to see the unexpected delay. http://lonewolf6-6009ac63d7e5da3a35dc08e4.c.6004d6b8d7e5da3a35dc04c8.cycle.io/about

Thanks for the advice!

import React, { useEffect, useState } from "react";
// import LW_ABOUTME from './LW_ABOUTME.png';

export default function About() {
  const [aboutImg, setAboutImg] = useState("Img1");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const images = [
      "/images/about-images/Img1.jpg",
      "/images/about-images/Img2.jpg",
      "/images/about-images/Img3.jpg",
      "/images/about-images/Img4.jpg",
      "/images/about-images/Img5.jpg",
      "/images/about-images/Img6.jpg",
      "/images/about-images/Img7.jpg",
      "/images/about-images/Img8.jpg",
      "/images/about-images/Img9.jpg",
      "/images/about-images/Img10.jpg",
      "/images/about-images/Img11.jpg",
      "/images/about-images/Img12.jpg",
      "/images/about-images/Img13.jpg",
      "/images/about-images/Img14.jpg",
      "/images/about-images/Img15.jpg",
      "/images/about-images/Img16.jpg",
      "/images/about-images/Img17.jpg",
      "/images/about-images/Img18.jpg",
      "/images/about-images/Img19.jpg",
    ];
    let imgNum = 0;

    const cacheImages = async (srcArray) => {
      const promises = await srcArray.map((src) => {
        return new Promise(function (resolve, reject) {
          const img = new Image();

          img.src = src;
          img.onload = resolve();
          img.onerror = reject();
        });
      });

      await Promise.all(promises);
      setIsLoading(false);
    };

    const changeImage = () => {
      setAboutImg(images[imgNum]);
      imgNum <= 17 ? imgNum++ : (imgNum = 0);
      setTimeout(() => {
        changeImage();
      }, 500);
    };
    cacheImages(images);
    !isLoading && changeImage();
  }, [isLoading]);

  return (
    <div id="page-content" className="about-div">
      <div className="about-img-div">
        {isLoading ? (
          <img src="/images/about-images/Img1.jpg" alt="first" className="about-img" />
        ) : (
          <img src={`${aboutImg}`} alt={aboutImg} className="about-img" />
        )}
      </div>
      <div className="about-text-div">
        <p className="about-text">
          Zachary Matias aka Lonewolf is a director and editor from the midwest.
          In 2016 he sold his car and purchased a video camera where he would
          shoot his very first music videos for friends and artists around the
          area. After reaching out to Chicago artists, he then started branching
          out and developing his own unique editing style.
        </p>
        <p className="about-text">
          Since then, he has had the pleasure of not only collaborating with but
          befriending some of his favorite artists and creatives and continues
          to do so.
        </p>
      </div>
    </div>
  );
}