Image being loaded a second time to be displayed in showcase

in react my project a product can have multiple images, those images are displayed on the product's page in a showcase component, where the user can click on an image to display it as main image like in the picture below

i've noticed an issue when the main image changes that the browser would "hang" for a second or two until it changes the main image, i monitored the network activity on chrome browser and found nothing. but when i tried this with firefox i saw that the image is being loaded a second time, which is consuming more time and resources..how can i prevent this from happening? here is my image showcase component's code, i'm using react.js with bootstrap 5

//{images} is an array that contains images' addresses
function ProductImageShowCase({ images }) {
    let [activeImage, setActiveImage] = useState(0);
    let imagesContainer = useRef();

    

    return (
        <div className="w-80 mx-auto border border-main shadow rounded p-1">
            <div className="w-100 mb-2 px-5 py-2">
                <img src={images[activeImage]} width="100%" height="400px" />
            </div>
            <div className="d-flex justify-content-between">
                <div onClick={scrollLefts} className="arrow-container d-flex justify-content-center align-items-center cursor-pointer">
                    <i className="bi bi-chevron-left text-main fs-1"></i>
                </div>

                <div ref={imagesContainer} className="text-center py-4" style={{ overflow: "hidden", whiteSpace: "nowrap", scrollBehavior: "smooth" }}>
                    {images.map((image, i) => {
                        return <img key={image} src={image} className={`mx-4 product-images-showcase ${i == activeImage ? "active-image" : ""}`} onClick={() => { setActiveImage(i) }} width={100} height={100} />
                    })}
                </div>

                <div onClick={scrollRights} className="arrow-container d-flex justify-content-center align-items-center cursor-pointer">
                    <i className="bi bi-chevron-right text-main fs-1"></i>
                </div>
            </div>
        </div>
    )
}