Framer Motion page transition happening simultaneously. How to make it occurs one after the other?

Question

I am using Framer Motion in nextjs,i have aded page transition animations thats are happening simultaneously. I want make these animations occur one after the other. _app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from "../layout/Layout"
import { AnimatePresence } from 'framer-motion'

export default function App({ Component, pageProps,router  }: AppProps) {
  return(
    <AnimatePresence mode="wait" initial={false} >
      <Layout >
        <Component {...pageProps} key={router.asPath} />
      </Layout>
    </AnimatePresence>
  )
}

index.tsx

import transition from './transition'
import React from 'react'

const index = () => {
  return (
    <div className='main'>
      <h1>Home</h1>
    </div>
  )
}

export default transition(index)

transition.js

import {motion} from 'framer-motion'
const transition = (OgComponent) => {
  return () => (
    <>
        <OgComponent />
        
            <motion.div
                className='slide-in'
                initial={{scaleY:0}}
                animate={{scaleY:0}}
                exit={{scaleY:1}}
                transition={{duration:1.5, ease:[0.22,1,0.36,1]}}
            />

            <motion.div
                className='slide-out'
                initial={{scaleY:1}}
                animate={{scaleY:0}}
                exit={{scaleY:0}}
                transition={{duration:1, ease:[0.22,1,0.36,1]}}
            />
    </>

  );
  }
export default transition

here is global.css

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

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

I am making a website where i want to add page transition first and second both animations are going from bottom to top but one by one i my case i can see only one div going from bottom to top.