react I want to hide the div tag when the animation is over

I'm using framer-motion for animation. When the animation pageVariants finishes, I want to hide the div tag used for the animation. Currently, when the animation is finished, the div tags are moved to the bottom of the screen so that the user can scroll vertically. I would like to make it so that users cannot scroll vertically after the animation ends. Is there any way to detect when the animation is finished?

import { motion } from 'framer-motion';
import { FunctionComponent } from 'react';

const Home: FunctionComponent = () => {
  const ease = [0.43, 0.13, 0.23, 0.96];

  const pageVariants = {
    initial: {
      y: '0',
      transition: { ease, duration: 10, delay: 0.8 },
    },
    animate: {
      y: '100%',
      transition: { ease, duration: 10 },
      transitionEnd: { display: "none",},
    },
    exit: {
      y: '0',
      opacity: 0,
      transition: { ease, duration: 10, delay: 0.8 },
    },
  };
  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto' }}>
        <div className="bg-red-100 h-screen">box</div>
        <div className="bg-blue-100 w-96">box2</div>
      </div>
      <div
        style={{
          width: '300px',
          position: 'absolute',
          marginLeft: 'auto',
          marginRight: 'auto',
          bottom: 0,
          top: 0,
          left: 0,
          right: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <div>
          <img src="profile.svg" />
          <p>hello</p>
        </div>
      </div>
      <motion.div
        className="h-screen bg-white absolute z-50 w-full -top-0"
        variants={pageVariants}
      ></motion.div>
    </>
  );
};

export default Home;