I want to show the component, after the first one left the view

I want to show the PAGE component, after the first one (LoadingScreen) left the view by exit animation, and make a smooth transition which uncovers the details of website included in page component.

using: framermotion, typescript, react.js, styledcomponents

const App = () => {
  const [isLoading, setIsLoading] = useState(true);

  if (isLoading) {
    setTimeout(() => {
      setIsLoading(false);
    }, 10000);
  }

  return (
    <AnimatePresence>
      {isLoading && (
        <motion.div
          style={{
            width: '100%',
            height: '100%',
          }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{
            duration: 5,
          }}
          exit={{ opacity: 0, y: -2000 }}
        >
          <LoadingScreen />
        </motion.div>
      )}
      {!isLoading &&(
        <motion.div
        style={{
          width: '100%',
          height: '100%',
        }}
        initial={{display: 'none'}}
        animate={{display: 'flex'}}
        transition={{
          duration: 5,
        }}
      >
        <Page />
      </motion.div>
      )}
    </AnimatePresence>
  );
};

at the moment there's no exit animation, and page component just instantly appears on the screen.

If I delete the part responsible (preview below) for showing the page, exit anim on loading screen works fine

    <AnimatePresence>
      {isLoading && (
        <motion.div
          style={{
            width: '100%',
            height: '100%',
          }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{
            duration: 5,
          }}
          exit={{ opacity: 0, y: -2000 }}
        >
          <LoadingScreen />
        </motion.div>
      )}
    </AnimatePresence>
  );```