In my Next.js project I have a list of places, with each place opens a modal with its details by pushing the place query to the URL (Link href={`/?place=${place}`}) and conditionally render the modal in the page component (<Modal place={router.query.place} isOpen={!!router.query.place}). I try to animate the opening and closing of the modal using Framer Motion but unfortunately it seems to only work when opening the modal. To close the modal, user clicks outside of it on an overlay wrapped with <Link href="/" scroll={false}>. Then the modal is closed without reload the page as router.query.place is falsy, but the animation still not runs. I tried to wrap _app.js with <AnimatePresence exitBeforeEnter> with no luck. Below is a screen recording and some code pieces.

Card Component:

const Card = ({ place }) => {
  return (
    <LinkBox>
      <Box w="100%" minH="100px" borderRadius="md" shadow="lg" overflow="hidden" position="relative" bg="currentcolor">
      </Box>
      <Link href={`/?place=${place}`} as={`/places/${place}`} scroll={false} passHref>
        <LinkOverlay>
          <Heading as="h3" fontSize="lg" fontWeight="bold" mt={2} mr={1}>
            {place}
          </Heading>
        </LinkOverlay>
      </Link>
    </LinkBox>
  );
};

Modal Component:

const Modal = ({ isOpen, place }) => {

  return (
    <>
      {isOpen && (
        <Link href="/" scroll={false}>
          <Box position="fixed" left="0" top="0" width="100vw" height="100vh"/>
        </Link>
      )}
      {isOpen && (
        <Box as={motion.div} initial="exit" animate="enter" exit="exit"
          variants={{
            enter: { y: "0%", opacity: 1, transition: { duration: 0.5, ease: "easeInOut" } },
            exit: { y: "50%", opacity: 0, transition: { duration: 0.5, ease: "easeInOut" } },
          }}>
        </Box>
      )}
    </>
  );
};