Framer motion - State not persisting through routes

Question

I'm trying to use Framer Motion to animate routes using AnimatePresence and for some reason the context i'm trying to populate info with (collecting personal info via forms as sign up steps) through each route doesn't persist when one rout exits and loads another via AnimatePresence. I'm not sure why this is happening. Should i pass down the state as props every time i load a new route?

 <AnimatePresence exitBeforeEnter>
   <Switch location={location} key={location.key}>
      <Route exact path="/" component={LandingPage} />
      ...
    </Switch>
 </AnimatePresence>

And i have added initial, animate and exit transitions to every component in each route. As soon as one component exits and other loads, the state stored in the context is reset.

Also location here comes from const location = useLocation() from react-router-dom

Answer 1

I think i figured it out. Placing your context provider within AnimatePresence will reload your frame within, causing a refreshed state.