Transição utilizando next.js e framer motion

Olá , estou criando um portfolio , resolvi acrescentar uma animação cada vez que troco de rota , porém por algum motivo não consigo fazer a chamada do componente ao fazer esta troca.

Segue o código na pasta _app.jsx do meu programa.

import Layout from "../components/layout";
import Transition from "../components/transition";
import { AnimatePresence, motion } from "framer-motion";
import { useRouter } from "next/router";

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();
  return (
    <main>
      <Layout>
        <AnimatePresence mode="wait">
          <motion.div key={router.pathname}>
            <Transition />
            <Component {...pageProps} />
          </motion.div>
        </AnimatePresence>
      </Layout>
    </main>
  );
}

Já tentei de varias formas diferentes e não consigo identificar o erro , detalhe já testei a animação de transição e ela funciona perfeitamente, o erro esta na chamada , pois nem o console log que coloquei no componente é chamado, alguém poderia me ajudar ? Me ajudaria muito sério , estou a muito tempo travado kk