React-router page transition animation - reactjs

Question

I am trying to create a transition effect between pages using react-router-dom. I am trying to delay the rendering of the routes component, but it doesn't seem to work.
I have the following code
const App = () => {
const location = useLocation();
const [displayLocation, setDisplayLocation] = useState(location);
const [transitionStage, setTransitionStage] = useState("slideIn");
useEffect(() => {
if (location !== displayLocation) setTransitionStage("slideOut");
}, [location, displayLocation]);
return (
<>
<Layout>
<ScrollToTop />
<TransitionAnimation
transitionStage={transitionStage}
onAnimationEnd={() => {
if (transitionStage === "slideIn") {
setTransitionStage("slideOut");
setDisplayLocation(location);
}
}}>
</TransitionAnimation>
<Routes location={displayLocation}>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Layout>
</>
);
};
export default App;
const TransitionAnimation = styled.div`
width: 0px;
height: 100vh;
background: #000000;
position: fixed;
top:0;
left:0;
bottom:0;
right: 0;
z-index: 0;
animation: ${(props) => props.transitionStage} 1s linear;
#keyframes slideIn {
from {
width: 0%;
}
to {
width: 90%;
}
}
#keyframes slideOut {
from {
right: 0%;
}
to {
right: -10000px;
}
}
`;
I have tried the above code, but it doesn't change the component even if the route changes.
Please what better way can I achieve this.