JavaScript (Next.js) won't preload images without console.log

I'm trying to create a scroll-based animation functionality similar to this project. https://codepen.io/j-v-w/pen/ZEbGzyv

But the thing is, when I define and execute this snippet inside useEffect, this will cause the images to flick, meaning they are not preloaded

const preloadImages = () => {
      for (let i = 1; i < frameCount; i++) {
        const img = new Image();
        img.src = currentFrame(i);
   }
 };

 preloadImages();

But if I add console.log(img), it will load images and work fine.

const preloadImages = () => {
      for (let i = 1; i < frameCount; i++) {
        const img = new Image();
        img.src = currentFrame(I);
        console.log(img)
   }
 };

 preloadImages();

Is there any way to load the images without logging it?

this is my whole code for refrenece https://replit.com/@farhadham/GiantTepidGraduate#src/App.jsx