I'm trying to implement a frame by frame animation by swapping out the image src every 100ms. Every time the image swaps, React will download the image again (with a randomnly generated name) instead of using the cached version. This causes the animation to skip a significant portion of frames if the image doesn't download within 100ms. Is there a way to force the component to cache the images and use them without reloading?

Screenshot of network tab showing reloading images with random generated file names

Test component code:

import React, { useState, useEffect } from 'react'
import Walk1 from '../assets/sam_sprites/walk/walk_1.png'
import Walk2 from '../assets/sam_sprites/walk/walk_2.png'
import Walk3 from '../assets/sam_sprites/walk/walk_3.png'
import Walk4 from '../assets/sam_sprites/walk/walk_4.png'
import Walk5 from '../assets/sam_sprites/walk/walk_5.png'
import Walk6 from '../assets/sam_sprites/walk/walk_6.png'
import Walk7 from '../assets/sam_sprites/walk/walk_7.png'
import Walk8 from '../assets/sam_sprites/walk/walk_8.png'
import Walk9 from '../assets/sam_sprites/walk/walk_9.png'

const Test = () => {
    const [currentImage, setCurrentImage] = useState({Walk1})
    const [imageQueue, setImageQueue] = useState([
        Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9,
        Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9,
        Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9,
        Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9,
        Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9,
        Walk1, Walk2, Walk3, Walk4, Walk5, Walk6, Walk7, Walk8, Walk9,
    ])
    useEffect(() => {
        const timer = setInterval(() => {
            setImageQueue((prev) => {
                setCurrentImage(prev[0]);
                return prev.slice(1);
            })
        }, 100);
        return () => clearInterval(timer);
    }, []);
    return (
        <div>
            <div style={{position: 'absolute'}}>{imageQueue}</div>
           <img src={currentImage}/> 
        </div>
    )
}

export default Test