React Carousel未显示所有图像

如何解决React Carousel未显示所有图像

我正在尝试构建轮播，但无法解决问题。因此，第一个图像可以很好地加载，但不会显示每个后续图像。我猜该组件没有重新渲染，但我不是100％

const [curImage,setCurImage] = useState (0)
    const images = ['/images/slideshow/slideshow1.webp','/images/slideshow/slideshow2.webp','/images/slideshow/slideshow3.webp','/images/slideshow/slideshow4.webp','/images/slideshow/slideshow5.webp','/images/slideshow/slideshow6.webp']

    const goToNext = () => {
        setCurImage(curImage === images.length - 1 ? 0 : curImage + 1);
    }

    useEffect(() => {
        setTimeout(goToNext,2000);
        return function() {
            clearTimeout(goToNext);
        }
    })

    return (
        <div className='Slideshow'>
            {images.map((image,key) => (
            <div 
            className={key === curImage ? 'Slideshow__Images Active':'Slideshow__Images'} 
            key={key} 
            aria-hidden={key !== curImage}
            >
                {key === curImage && (
                <img src={`${image}`} alt='Gulfport Votes Images'/>
                )}
            </div>
        ))}
        </div>
    )

CSS

.Slideshow__Images {
    opacity: 0;
    transition: 0.3s ease;
}

.Slideshow .Active {
    opacity: 1;
    transition-duration: 0.2s;
}