React router and framer motion(AnimatePresence)

I want to animate the "<Project />" component. I am using Framer motion to animate it. The AnimatePresence is tracking the immediate children (Routes) and at first I gave the location.pathname as key to it so that whenever we go to new route old one will unmount and new will re mount and animation will happen. but then, in case of sub route the only thing i want to animate is <Project /> component but it is also first animating out the parent component then animating it in again and then animating the <Project /> component. So, I sliced the pathname so that it will not change when we go to sub route but now it is just animating in <Project /> component and exit animation is not working.