I have been trying to add animation for page transitions in my next application. However, when I'm importing and using AnimatePresence tag, my app shows a server error.

The error only occurs when using AnimatePresence.

Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
renderElement
file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6043:9)
renderNodeDestructiveImpl
file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)

Below is the code for the _app.js file

import { ChakraProvider } from "@chakra-ui/react";
import Layout from "../components/layout/main";
import Fonts from "../components/fonts";
import theme from "../lib/theme";
import {AnimatePersence} from 'framer-motion';
const Website = ({ Component, pageProps, router }) => {
    return (
        <ChakraProvider theme={theme}>
            <Fonts/>
            <Layout router={router}>
                <AnimatePersence exitBeforeEnter initial={true} >
                <Component {...pageProps} key={router.route} />
                </AnimatePersence>
            </Layout>

        </ChakraProvider>
    )
}

export default Website;

I don't know what is causing this error, so could anyone please help me understand why this is happening and how I can solve it.