Переход страницы в ответ с помощью React Transition Group и React-Carousel

Question

У меня проблема с соотношением перехода страницы с React Transition Group и React-router.

Я выполнил несколько руководств, чтобы сделать переходы между страницами, которые хорошо работают со всеми моими страницами, за исключением страницы, где у меня есть карусель, созданная с помощью https://github.com/brainhubeu/react-carousel.

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

Я пытаюсь изменить свою библиотеку анимации, но тоже не могу заставить ее работать.

Я уверен, что упускаю что-то очевидное, но я просто не могу понять это x)

Я сделал очень простую версию, чтобы показать проблему, она доступна на netlify здесь: https://kind-kilby-af855b.netlify.app/gallery2

Для части кода я сделал компонент AnimatedSwitch, который добавляет анимацию в соответствии с маршрутом, по которому вы находитесь, и маршрутом, по которому вы переходите (маршруты - это массив с моим путем маршрута в виде строки):

import React, { cloneElement } from 'react'
import { useLocation, Switch, Route } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from "react-transition-group";
import routes from '../../data/pages'
import Gallery from '../Gallery/Gallery'

function AnimatedSwitch() {
    const location = useLocation()
    const currentScreen = routes.indexOf(location.pathname)
    const previousScreen = location.state ? location.state.previousScreen : 0
    var className = currentScreen > previousScreen ? "slide-forward" : "slide-backward"

    return (
        <TransitionGroup
            childFactory={child => (
                cloneElement(child, {
                    classNames: className
                })
            )}
        >
            <CSSTransition key={location.pathname} timeout={1000} enter={true} exit={true}>
                <Switch location={location} key={location.pathname}>
                    <Route exact path="/gallery1">
                        <Gallery />
                    </Route>
                    <Route exact path="/gallery2">
                        <Gallery />
                    </Route>
                    <Route exact path="/gallery3">
                        <Gallery />
                    </Route>
                </Switch>
            </CSSTransition>
        </TransitionGroup>
    )
}

export default AnimatedSwitch

и это мой компонент галереи (здесь для теста используется picsum):

import React, { useState, useEffect } from 'react'
import CarouselElem from './CarouselElem'
import Carousel from '@brainhubeu/react-carousel'
import '@brainhubeu/react-carousel/lib/style.css'
import { useLocation } from 'react-router-dom'

function Gallery() {
    const location = useLocation()
    const [carouselIndex, setCarouselIndex] = useState(0)
    const [images, setImages] = useState([])

    useEffect(() => {
        var images =[]
        
        for(var i = 0; i < 50; i++){        
            const x = 400
            const y = 200
            images[i] = "https://picsum.photos/" + x + "/" + y;
        }

        setImages(images)
    }, [location])

    return (
        <section className="gallery">
            <Carousel className="nav-list" infinite centered slidesPerPage={12} draggable={false} clickToChange value={carouselIndex} onChange={(index) => {setCarouselIndex(index)}} breakpoints={{
                700: {
                    slidesPerPage: 6
                }
            }}>
                {
                    images.map((image, index) => (
                        <img src={image} key={`${image.url}-${index}-up`} className="slider-img" />
                    ))
                }
            </Carousel>
            <Carousel infinite centered slidesPerPage={2} draggable={false} clickToChange value={carouselIndex} onChange={(index) => {setCarouselIndex(index)}} breakpoints={{
                700: {
                    slidesPerPage: 1
                },
                500: {
                    slidesPerPage: 1,
                    arrows: true
                }
            }}>
                {
                    images.map((image, index) => (
                        <CarouselElem image={image} setShowLightbox={setShowLightbox} key={`${image.url}-${index}-main`}/>
                    ))
                }
            </Carousel>
            <Carousel className="nav-list" infinite centered slidesPerPage={12} draggable={false} clickToChange value={carouselIndex} onChange={(index) => {setCarouselIndex(index)}} breakpoints={{
                700: {
                    slidesPerPage: 6
                }
            }}>
                {
                    images.map((image, index) => (
                        <img src={image} key={`${image.url}-${index}-down`} className="slider-img" />
                    ))
                }
            </Carousel>
        </section>
    )
}

export default Gallery

А мой компонент CarouselElem - это просто изображение с наложением.

Извините за мой английский, это мой первый пост на Stackru.

Заранее большое спасибо;)