Как оживить переход изображения

Question

Я пытаюсь сделать анимацию переходов для изображений слайдов.

У меня есть массив с более чем 5 itens, но мне нужно показывать 5 элементов за раз. Функционально это работает, но я не могу анимировать переходы между ними.

Для управления отображением я использую массив (слайдер), который служит для отображения только 5 элементов. Массив imgs может содержать десятки элементов.

ниже того, что я делал до сих пор

const [slider, setSlider] = useState<string[]>([]);
const [index, setIndex] = useState<number>(imgs.length / 2);

const mod = (position: number, totalItems: number) => 
    {
        return ((position % totalItems) + totalItems) % totalItems;
    }

useEffect(() => {
    function ArrangeArray() {
        const slid: string[] = [];
        const totalItems = imgs.length;
        slid.push(imgs[mod(index-2, totalItems)]);
        slid.push(imgs[mod(index-1, totalItems)]);
        slid.push(imgs[mod(index, totalItems)]);
        slid.push(imgs[mod(index+1, totalItems)]);
        slid.push(imgs[mod(index+2, totalItems)]);
        setSlider(slid);
    }
    ArrangeArray();
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const prevProperty = () => {
    setIndex(index + 1);
    slider.push(imgs[mod(index+2, imgs.length)]);
    slider.shift();
}

const nextProperty = () => {
    setIndex(index - 1);
    slider.unshift(imgs[mod(index-2, imgs.length)]);
    slider.pop();
}

return (
    <>
        <div className="slider-container">
            {slider.map((img, index) => (
                <div key={index} className={`slide${index} img-effect`}>
                    <div>
                        <img src={img} />
                    </div>
                </div>

            ))}
        </div>
        <button onClick={() => prevProperty()}>
            Prev
        </button>
        <button onClick={() => nextProperty()}>
            Next
        </button>
    </>
);