basically I'm trying to make one of those apple scroll image animations: [example](https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/)
I can see on my network dev tools that the images are preloaded but I'm not sure how to render them with my jsx

this is how i'm preloading them

  useEffect(()=>{
    const preloadImages = () => {
      const emptyArray = [...Array(frameCount+1).keys()]
      emptyArray.forEach((element)=>{
        const img = new Image();
        img.src = `/image-sequence/animation (${element}).png`;
      })
    }
    preloadImages();
  },[])

and this is how i'm rendering them

<img
  src={`/image-sequence/animation (${frame}).png`}
  alt='sososowhat'
  className='h-auto max-w-6xl w-full'
/>

when i look at my network tag it fetches the required photo again rather than making use of the preloaded photo

any idea how to fix this?