How to Pre-Load SVG's in React Select Drop Down Menu

Question

Good morning,

I am currently trying to have the SVG's pre-loaded in my React Select drop down menu, so when the user clicks on the menu they instantly see the SVG's instead of - clicking into the menu and then the SVG's loading down the list...

I am currently mapping options to the dropdown (in my util file) as so:

export const customOptions = countries.map(country => ({
    value: country.name,
    label: (
        <div>
            <img src={require(`../images/flags/${country.svg}`)} className="flag-image" />
            <span>
                {country.name} ({country.dialingCode})
            </span>
        </div>
    ),
}));

and trying to pre-load SVGs in my container file as so:

const preloadImages = images => {
        images.forEach((image) => {
        const img = new Image();
        img.src = image;
        });
    }

    const flagImageUrls = countries.map(country => (
        `../images/flags/${country.svg}`
    ));

    useEffect(() => {
        preloadImages(flagImageUrls);
    }, []);

yet the SVG's still only load when I click into the dropdown menu...

Does anyone have any ideas?

Much appreciated,

Jake