I have a slideshow of images (that changed when I click on different options. So the images don't change automatically) and even tho I first preload all of the images when the application is loaded ( I have all of this in react ) it still "flashes white" between them. The preload code:

    useEffect(() => {
        setPreloaded(false)
        const preLoadImages = function preLoadImages(imageUrl, numberOfImagesPerColumn) {
            const promises = [];
            for (let index = 0; index < numberOfImagesPerColumn; index++) {
                const fImgUrl = `${imageUrl}${index + 1}.${t}`;
                promises.push(loadImage(fImgUrl).catch((err) => {
                    //  TODO: Handle 404 Error
                }));
            }
            return Promise.all(promises);
        };

        function loadImage(src) {
            return new Promise(((resolve, reject) => {
                const img = new Image();
                img.onload = function () {
                    resolve(img);
                };
                img.onerror = function () {
                    reject(src);
                };
                img.src = src;
            }));
        }

        preLoadImages(p, n).then(() => {
            setPreloaded(true);
        });
    }, [p]);

How can I make a smooth transition between them or like the old image will still stay until the new one is loaded completely and will transition without a "white flash" between them ?