Next.js + Framer Motion でページ遷移アニメーションを実装したいが、「exit」が走らない

// _app.tsx
import { AnimatePresence } from "framer-motion";

const MyApp = ({ Component, pageProps, router }: AppProps) => (
    <AnimatePresence exitBeforeEnter>
        <Component key={router.asPath} {...pageProps} />
    </AnimatePresence>
);

export default MyApp;

// レイアウト用のファイル
export default function Layout(props: Props) {
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <Header />
	    // ヘッダー直下に配置
            <motion.div
                    initial={{ opacity: 0, y: 10 }} // 初期状態
                    animate={{ opacity: 1, y: 0 }} // マウント時
                    exit={{ opacity: 0, y: 10 }} // アンマウント時
                    transition={{
                    duration: 0.5,
                    }}
            >
                <Container>
                    {props.children}
                </Container>
            </motion.div>
        </ThemeProvider>
    );
}

- import { Link } from "@mui/material";
+ import Link from "next/link";