Why is the exit animation not working?

`'use client';

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';


export default function TransLayout({ children, backgroundColor }) {
  const [isVisible, setIsVisible] = React.useState(false);

  React.useEffect(() => {
    setIsVisible(true);
    return () => setIsVisible(false);
  }, [backgroundColor]);

  const anim = (variants, custom = null) => {
    return {
      initial: 'initial',
      animate: 'enter',
      exit: 'exit',  // Ensuring exit animations are added
      custom,
      variants,
    };
  };

  const columnsPiece = 5;

  return (
    <div className='page stairs' style={{ backgroundColor }}>
      <motion.div {...anim(opacity)} className='transition-background' />
      <AnimatePresence mode="wait">
        {isVisible && (
          <div key={backgroundColor} className="content-wrapper">
            <div className='transition-container'>
              {/* Top Containers */}
              {[...Array(columnsPiece)].map((_, i) => (
                <motion.div
                  key={`top-${i}`}
                  {...anim(expandTop, columnsPiece - i)}
                  className='topContainer'
                  exit={{
                    display: 'none',  // Prevents visible elements on exit
                    ...expandTop.exit(columnsPiece - i),
                  }}
                />
              ))}

              {/* Bottom Containers */}
              {[...Array(columnsPiece)].map((_, i) => (
                <motion.div
                  key={`bottom-${i}`}
                  {...anim(expandBottom, columnsPiece - i)}
                  className='bottomContainer'
                  exit={{
                    display: 'none',  // Prevents visible elements on exit
                    ...expandBottom.exit(columnsPiece - i),
                  }}
                />
              ))}
            </div>
            <motion.div
              key="content"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}  // Fade out content when exiting
              transition={{ delay: 0.5 }}
            >
              {children}
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
}
`

I want five containers coming from the top to the bottom and five containers coming from the bottom to the top to meet in the middle and then disappear.

animations:

export const expandTop = {
    initial: {
        top: '-100vh',  // Top starts off-screen
    },
    enter: (i) => ({
        top: 0,
        transition: {
            duration: 0.4,
            delay: 0.05 * i,
            ease: [0.215, 0.61, 0.355, 1],
        },
    }),
    exit: (i) => ({
        top: '-100vh',  // Moves top back off-screen when exiting
        transition: {
            duration: 0.4,
            ease: [0.215, 0.61, 0.355, 1],
        },
    }),
};

export const expandBottom = {
    initial: {
        top: '100vh',  // Bottom starts off-screen
    },
    enter: (i) => ({
        top: 0,
        transition: {
            duration: 0.4,
            delay: 0.05 * i,
            ease: [0.215, 0.61, 0.355, 1],
        },
    }),
    exit: (i) => ({
        top: '100vh',  // Moves bottom back off-screen when exiting
        transition: {
            duration: 0.4,
            ease: [0.215, 0.61, 0.355, 1],
        },
    }),
};

export const opacity = {
    initial: {
        opacity: 0.5,
    },
    enter: {
        opacity: 0,
    },
    exit: {
        opacity: 0.5,
    },
};