AnimatePresense exit is not working while page transition

[Antaroop]

This is layout.tsx

<main>
     {children}
</main>

And this is template.tsx
AnimatePresense exit is not working while page transition

"use client";

import { AnimatePresence, motion as m } from 'framer-motion';
import { usePathname } from 'next/navigation'


export default function Template({
    children
}: {
    children: React.ReactNode
}) {
    const currentRoute = usePathname();
    const anim = (variants: any) => {
        return {
            initial: 'initial',
            animate: 'enter',
            exit: 'exit',
            transition: {
                duration: 1.25,
                ease: [0.76, 0, 0.24, 1]
            },
            variants
        }
    }
    const opacity = {
        initial: {
            opacity: 0,
            y: 20,
            scale: 1.05
        },
        enter: {
            opacity: 1,
            y: 0,
            scale: 1
        },
        exit: {
            opacity: 0,
            y: 0,
            scale: 1.05
        }
    }

    return (
        <AnimatePresence mode={'wait'}>
            <m.div {...anim(opacity)} key={currentRoute}>
                {children}
            </m.div>
        </AnimatePresence>
    )
}

I will be thankful if someone can help