Page transition with Framer Motion

Question

I am having a hard time trying to get the page transition I want with Framer motion.

The goal is when changing pages the new page will overlap the current one. However, at the moment what happens is that the current page disappears as soon as the new page starts to appear.

Here is an image where you can better understand what I want to achieve:

here are the div settings:

<m.div className='wrapper'
  initial={{ clipPath:"inset(0px round 10px)", y: "100vh", zIndex: "1" }} 
  animate={{ clipPath:"inset(0px round 0px)", y: "0", zIndex: "0", transition:{delay: "0.25", duration: "0.5", ease: "easeIn"} }}
  exit={{ clipPath:"inset(10px round 10px)", filter: "brightness(0.9)", transition:{duration: "0.25", ease: "easeOut"} }}
  >

and here is the AnimatePresence:

<AnimatePresence>
<Routes location={location} key={location.pathname}>
    <Route path="/" element={<Home/>}></Route>
    <Route path="/about" element={<About/>}></Route>
    <Route path="/work" element={<UnderConstruction/>}></Route>
    <Route path="*" element={<Home to="/" replace />} />
</Routes>
</AnimatePresence>

Thanks in advance!