I have the following next/image in one of my pages, with priority set to true to eager load the asset from the state

const [imageToUse, setImageToUse] = useState(initialImage);

<Image src={imageToUse} alt='scrolls' priority={true} ... />

I have set state in such a way that it would listen on scroll event and have it calls the state imageToUse from a new image as the user scrolls:

 const cycleImages = {
    1: "/header/_0011.webp",
    2: "/header/_0012.webp",
    3: "/header/_0013.webp",
    ....
    37: "/header/_0047.webp",
}

 useEffect(() => {
    // scrolled at every 30 pixels
    const y = clientWindowHeight / 30;
    // Scroll event distance + cycle through a list of objects
    let label = Math.min(Math.floor(y) + 1, 37)
    // Set imageToUse
    let image = cycleImages[label]
    setImageToUse(image)
}

The above logic works, but the only problem I have is that <Image /> only eager loads the initial image or the image that is about to be scrolled through - whereas I want it to eager load all 37 images and to avoid fetching ONLY when it is scrolls to and create stutter (i.e. bad user experience).

So how do I eager load all 37 images in NextJS?