Framer motion AnimatePresence exit not working as expected

Question

Animate presence exit prop is not working, I'm starting to work with this framework, I followed what's in the documentation but even so my component isn't acting the way I want it to, what am I doing wrong?

this is my component

  return (
    <div className={styles.modal__overlay} id="modalOverlay-1">
      <AnimatePresence>
        {cartIsOpen && (
          <motion.div
            key={"cartModal"}
            initial={{ y: -300, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 300, opacity: 0 }}
            className={styles.cartModal__container}
            role="dialog"
          >
            <MdClose
              className={styles.cartModal__closeBtn}
              onClick={() => setCartIsOpen(null)}
              size={32}
            />
            <h2>CARRINHO</h2>
            <ul>
              {listCart?.map((listItem) => (
                <ProductCardModal product={listItem} key={listItem.id} />
              ))}
            </ul>
            <p
              className={styles.totalValue__display}
            >{`Total: ${cartTotalValue.toLocaleString("pt-BR", {
              style: "currency",
              currency: "BRL",
            })}`}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};