Usage with Animate Presence

[connorhvnsen]

Attempting scroll to top when the exit animation completes. Any ideas? The following throws the error:
TypeError: Cannot read properties of null (reading 'scrollTo')

import "../styles/globals.css";
import "../styles/locomotive-scroll.css";
import { useRef } from "react";
import { LocomotiveScrollProvider } from "react-locomotive-scroll";
import { useLocomotiveScroll } from "react-locomotive-scroll";
import { useRouter } from "next/router";
import { AnimatePresence } from "framer-motion";

function MyApp({ Component, pageProps }) {
  const containerRef = useRef(null);
  const { asPath } = useRouter(); // With next/router
  const { scroll } = useLocomotiveScroll();

  return (
    <>
      <div className="app dark">
        <LocomotiveScrollProvider
          options={{
            smooth: true,
            mobile: {
              smooth: false,
            },
            tablet: {
              smooth: false,
            },
            // ... all available Locomotive Scroll instance options
          }}
          location={asPath}
          containerRef={containerRef}
          // onLocationChange={(scroll) =>
          //   scroll.scrollTo(0, { duration: 0, disableLerp: true })
          // }
        >
          <main
            className="main dark:bg-black"
            data-scroll-container
            ref={containerRef}
          >
            <AnimatePresence
              exitBeforeEnter
              initial={true}
              onExitComplete={() =>
                scroll.scrollTo(0, { duration: 0, disableLerp: true })
              }
            >
              <Component {...pageProps} key={asPath} />
            </AnimatePresence>
          </main>
        </LocomotiveScrollProvider>
      </div>
    </>
  );
}

export default MyApp;