Nextjs standard <img> onLoad event not working for all images

Question

I am working on an app that is veeeery heavy on assets and I am trying to make a loading screen, so that once the loading screen is removed all of the assets beneath it are already loaded.

I am trying to track all the images through their onLoad event, but for some reason it does not get triggered for all images:

I have about 20-30 images on the website, and I have my own base Image component that I have created (so that I can easily manipulate all of them for situations like this one):

export interface ImageProps {
  src: string;
  width: number;
  height: number;
  alt?: string;
  includeInOnLoad?: boolean;
}

export const Image: React.FC<ImageProps> = ({
  width,
  height,
  src,
  alt,
  includeInOnLoad = false,
  ...props
}) => {   
  console.log("img src", src); // This line does log all 20-30 image sources

  return (
    <S.ImageContainer {...props} width={width} height={height}>
      <img
        src={src}
        alt={alt}
        onLoad={() => {
          console.log("loaded, ", src); // this gets triggered only for 8-10 of all of the images, and does not get triggered for some that are loaded too
        }}
      />
    </S.ImageContainer>
  );
};

So the issue is that the log in the onLoad function does not get triggered for all of the images available on the website that are also loaded and visible, this is the output:

img src /imgs/UFO1.png
img src /imgs/city/cityBack.png
img src /imgs/city/cityFore.png
img src /imgs/city/mountain.png
img src /imgs/city/rocksBunny.png
img src /imgs/city/bushes.png
img src /loadingScreen.gif
img src /imgs/wallet.png
img src /imgs/belowFloatingIsland.png
img src /thePass/ThePass.png
img src /thePass/border.png
img src /imgs/progressBar/loadingBarFull.png
img src /imgs/progressBar/loadingBarEmpty.png
img src /imgs/roadmap/map.png
img src /imgs/roadmap/chillMapText.png
img src /imgs/roadmap/c1.png
img src /imgs/roadmap/c2.png
img src /imgs/UFO1.png
img src /imgs/clouds/Cloud6.png
img src /imgs/clouds/Cloud4.png
img src /imgs/clouds/Cloud7.png
img src /imgs/clouds/Cloud8.png
img src /imgs/clouds/Cloud9.png
img src /imgs/UFO1.png
img src /imgs/city/cityBack.png
img src /imgs/city/cityFore.png
img src /imgs/city/mountain.png
img src /imgs/city/rocksBunny.png
img src /imgs/city/bushes.png
loaded,  /imgs/wallet.png
loaded,  /imgs/UFO1.png
loaded,  /imgs/roadmap/map.png
loaded,  /imgs/roadmap/chillMapText.png
loaded,  /imgs/roadmap/c1.png
loaded,  /imgs/roadmap/c2.png
loaded,  /imgs/clouds/Cloud6.png
loaded,  /imgs/clouds/Cloud4.png
loaded,  /imgs/clouds/Cloud7.png
loaded,  /imgs/clouds/Cloud8.png

All of the remaining images that are not in the onLoad are too loaded, its not like they are not, but their onLoad does not get triggered at all.