Estoy usando modal con framer motion, la animación inicial para el modal funciona bien, pero al salir no funciona en absoluto. El modal desaparece inmediatamente por alguna razón.

Aquí es donde estoy abriendo el modal:

 const Agenda = () => { const [modalOpen, setModalOpen] = useState(false); const close = () => setModalOpen(false); const open = () => setModalOpen(true); return ( <> <AnimatePresence initial={false} exitBeforeEnter={true} > {modalOpen && ( <Modal modalOpen={modalOpen} handleClose={close}> <AgendaContent /> </Modal> )} </AnimatePresence> </> ); }; export default Agenda;

Y aquí está el modal en sí:

 const newspaper = { hidden: { transform: "scale(0) rotate(720deg)", opacity: 0, transition: { delay: 0.3, }, }, visible: { transform: " scale(1) rotate(0deg)", opacity: 1, transition: { duration: 0.5, }, }, exit: { transform: "scale(0) rotate(-720deg)", opacity: 0, transition: { duration: 0.3, }, }, }; const Modal = ({ handleClose, children }) => { return ( <Backdrop onClick={handleClose}> <motion.div drag onClick={(e) => e.stopPropagation()} className="modal" variants={newspaper} initial="hidden" animate="visible" exit="exit" > <img className="close-icon" src={CloseIcon} alt="close" onClick={handleClose} /> {children} </motion.div> </Backdrop> ); }; export default Modal;

Seguí este tutorial . No estoy seguro de lo que estoy haciendo mal aquí, estoy usando AnimatePresence allí, ¿alguna idea de qué podría estar mal?