Dúvida

Olá , estou criando um Portfólio , utilizando React ,frame-motion e react-router-dom , criei uma animação de Transição entre páginas para que toda vez que eu mude de rota a animação seja chamada .

O problema é que ao mudar de rota, o novo componente correspondente a rota é chamado imediatamente, antes mesmo de minha animação terminar.

Gostaria que os novos componente só renderizassem depois que minha animação for executada.

Estou a muitos dias tentando resolver e nada ... Alguém poderia me ajudar ?

Página APP =>

import { Cabecalho } from "./componentes/Cabecalho";

import GlobalStyled from "./componentes/GlobalStyled";

import { ConteudoDaPagina } from "./componentes/Páginas/Paginação";

function App() {
  return (
    <>
      <GlobalStyled />
      <Cabecalho />
      <ConteudoDaPagina />
    </>
  );
}

export default App;

Página referente as rotas =>

import { Route, Routes, BrowserRouter as Router } from "react-router-dom";

import { AboutMe } from "../About Me";

import { Intro } from "../Home";

import { Projects } from "../Projects";

import { TalkToMe } from "../Talk To Me";

import Transicao from "../Animações/Transição/Transition";  **//Animação de Transição entre paginas** 

import { Menu } from "../../Menú";

export function ConteudoDaPagina() {
  return (
    <Router>
      <Menu />
      <Routes>
        <Route path="/" element={<Intro />} />
        <Route path="/About_Me" element={<AboutMe />} />
        <Route path="/Projects" element={<Projects />} />
        <Route path="/Talk_To_Me" element={<TalkToMe />} />
        <Route path="*" element={<div>'Página não encontrada'</div>} />
      </Routes>
    </Router>
  );
}