React TransitionGroup dynamic CSSTransition

Question

import { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

const Home = ({ setTransitionClass }) => {
    return (
        <div className="w-100 bg-success vh-100">
            <h1>Home</h1>
            <Link to="/picnic" onClick={() => setTransitionClass('fadeLeft')}>
                Picnic
            </Link>
        </div>
    );
};
const Picnic = ({ setTransitionClass }) => {
    return (
        <div className="w-100 bg-secondary vh-100">
            <h1>Picnic</h1>
            <Link to="/" onClick={() => setTransitionClass('fadeRight')}>
                Home
            </Link>
        </div>
    );
};
const routes = [
    { path: '/', name: 'home', component: Home },
    { path: '/picnic', name: 'picnic', component: Picnic },
];

function App() {
    const [transitionClass, setTransitionClass] = useState('');
    const location = useLocation();
    return (
        <>
            <div className="container-fluid p-0">
                <TransitionGroup>
                    <CSSTransition key={location.key} classNames={transitionClass} timeout={5000}>
                        <Routes location={location}>
                            {routes.map((route, index) => (
                                <Route
                                    key={index}
                                    path={route.path}
                                    element={<route.component setTransitionClass={setTransitionClass} />}
                                />
                            ))}
                        </Routes>
                    </CSSTransition>
                </TransitionGroup>
            </div>
        </>
    );
}

export default App;

Have problem on fade Left and Right animation, The CSSTransition will dynamic bind to transitionClass so I can pass animation from child, but the problem is when I call setTransitionClass('fadeLeft') , it will create new component with correct className, but the existing component won’t update the className.