Leave animation doesnt work in React project with Framer Motion

Question

im trying make page transition,should have 2 animations, one on enter and one on leave, the thing is that on enter it works perfectly fine, but it doesnt on leave! why? here is my code:)

import React from "react";
import { Routes, Route } from "react-router-dom";
import Layout from "./layouts/Layout";
import { AnimatePresence } from "framer-motion";

import Home from "./pages/Home";
import About from './pages/About';

function App() {
  return (
    <>
      <AnimatePresence mode="wait">
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Route>
        </Routes>
      </AnimatePresence>
    </>
  )
}

export default App

here the App.jsx

import React from "react";
import { motion } from "framer-motion";

const Transition = ({children}) => {
    return (
      <>
        {children}
        <motion.div
          className="slide-in"
          initial={{scaleY: 0}}
          animate={{scaleY: 0}}
          exit={{scaleY:1}}
          transition={{duration:1,ease:[0.22,1,0.36,1]}}
        ></motion.div>
        <motion.div
          className="slide-out"
          initial={{scaleY: 1}}
          animate={{scaleY: 0}}
          exit={{scaleY:0}}
          transition={{duration:1,ease:[0.22,1,0.36,1]}}
        ></motion.div>
      </>
    )
}

export default Transition;

here is the transition component

.slide-in{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    transform-origin: bottom;
    background: #0f0f0f;
}

.slide-out{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    transform-origin: top;
    background: #0f0f0f;
}

its in my index.css

import React from "react";
import Transition from "../../components/Transition";

const About = () => {
  
  return (
    <Transition>
      <div>
        <h1>About</h1>
      </div>
    </Transition>
  )
}
export default About

and here is the About page! please help guys,thanks in advance to you all