Next.js document is not defined trying to implement locomotive-scroll

Question

I'm trying to implement Locomotive Scroll in my Nextjs app, and I'm having trouble...

Here's my code:

import type { AppProps } from "next/app";
import { useEffect } from "react";

import "../styles/global.css";
import "../styles/locomotive-scroll.css";

import locomotiveModule from "locomotive-scroll";

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    let scroll: any;

    if (typeof window !== "undefined")
      scroll = new locomotiveModule.default({
        el: document.querySelector("[data-scroll-container]"),
        smooth: true,
        smoothMobile: false,
        resetNativeScroll: true,
      });

    // `useEffect`'s cleanup phase
    return () => scroll.destroy();
  });

  return (
    <main className="main" data-scroll-container>
      <Component {...pageProps} />
    </main>
  );
}

export default MyApp;

This throughs a document is not defined error message and I don't understand why... I look up for that error and with the if (typeof window !== "undefined") should work, but is not working at all.

Thanks!