Добавление анимации к изменению изображения в React

Я пытался реализовать смену изображений по клику в React. У меня есть 3 изображения, расположенные друг над другом, и я изменяю атрибут src изображений. Несмотря на то, что сам функционал работает нормально, мне не удалось добавить анимацию перехода. Я пытался получить что-то похожее на то, что на фото

стопка фотографий

Я столкнулся с некоторыми решениями, основанными на том факте, что анимация воспроизводится только один раз, когда компонент визуализируется в первый раз, и чтобы вызвать повторную визуализацию элементов изображения, мне пришлось назначить атрибут «ключ» изображениям, однако это не так. т работать на меня. Однако, возможно, я ошибаюсь.

Буду признателен за любую помощь :)

Вот соответствующие части кода:

const [activeImage, setActiveImage] = useState(1);



const nextImg = () => {
activeImage === 5 ? setActiveImage(1) : setActiveImage(activeImage+1)
}

const prevImg = () => {
activeImage === 1 ? setActiveImage(5) :setActiveImage(activeImage-1)
}


<div className = "frame">
        <img key = {activeImage} className = "current-image" src = {`/src/assets/images/${activeImage}.jpg`} />            
        <img key = {activeImage + 1} className = "next-image" src = {`/src/assets/images/${activeImage === 5 ? activeImage-4 : activeImage + 1}.jpg`} />
        <img key = {activeImage + 2} className = "next-2-image" src = {`/src/assets/images/${activeImage === 4 || activeImage === 5 ? activeImage-3 : activeImage + 2}.jpg`} />
    </div>`

      <button className='left' onClick = {prevImg}><Arrow /></button>
      <button className='right' id='right' onClick = {nextImg}><Arrow /></button>