I want to make smooth page transition with scroll restoration. I have been trying to do scroll restoration with page transitions in React but can't make it smooth.

<Navbar />
  <AnimatePresence exitBeforeEnter>
    <ScrollToTop/>
    <Routes location={location} key={location.pathname}>
        <Route path="/" element={<Home />}/>
        <Route path="/about" element={<About />}/>
    </Routes>
  </AnimatePresence>
<Footer />

In the above code, I tried to put ScrollToTop inside AnimatePresence to make restore scroll while page is transitioning. However, I shows a warning saying that I have multiple children inside AnimatePresence, and page transition behaves strangely, as my Footer and Navbar kinda flashes on the page while it transitions. If I put ScrollToTop outside of the AnimatePresence, it first scrolls to top, and only then starts animation, which looks undesired.

My ScrollToTop.js file, which was suggested by react-router:

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Versions: "framer-motion": "^6.2.4" and "react-router-dom": "^6.2.1".