我试图创建一个使用拦截路由的模态，如NextJS文档中的example所示。我正在使用成帧器运动来实现模态动画，但Animate Presence在这种情况下不起作用。
app/(features)/@loginModal/(.)login/page.tsx中的page.tsx文件

import Modal from "@General/Modal";
import Login from "@Auth/Login";

export default function NavbarLogin() {
    return (
        <Modal>
            <Login />
        </Modal>
    );
}

app/(features)/layout.tsx中的layout.tsx文件

"use client";

import { AnimatePresence } from "framer-motion";
import Navbar from "@Navbar/Navbar";
import Guard from "@Auth/Guard";

export default function MainLayout({
    children,
    loginModal,
}: {
    children: React.ReactNode;
    loginModal: React.ReactNode;
}) {
    console.log(loginModal);
    return (
        <Guard>
            <main>
                <Navbar />
                <div className="pt-20">
                    {children}
                    <AnimatePresence>{loginModal}</AnimatePresence>
                </div>
            </main>
        </Guard>
    );
}

我尝试将AnimatePresence标签更改为不同的位置，如app/layout.tsx，app/(auth)/layout.tsx，app/(auth)/login/page.tsx等。但它没有工作。
编辑：在github https://github.com/framer/motion/issues/1850https://github.com/vercel/next.js/issues/49279上发现了这个问题，但是在当前版本中没有提到的解决方法。有人知道如何在最新版本中修复这个问题吗？