Hello, I have this animation using framer motion in loading.js

but, the exit animation is not executed, because the AnimatePresence, along with the motion.div are unmounted immediately, hence it is unable to defer the unmounting. Please help.

"use client";
import { AnimatePresence, motion } from "framer-motion";

function loading() {
  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0, scale: 0.75 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0 }}
        className="fixed inset-0 z-50 flex items-center justify-center bg-galaxy-grey-950"
      >
        <img src="/logo_animated.svg" />
      </motion.div>
    </AnimatePresence>
  );
}

export default loading;