I want to beautify my project using locomotive-scroll in my nextjs app. But I keep getting the error document is not defined. How can I solve this?

In short, this is what I need to know.

Thank you from now!

import React, { useEffect } from "react";
import locomotiveScroll from "locomotive-scroll";

function App() {
  const scrollRef = React.createRef();

  useEffect(() => {
    const scroll = new locomotiveScroll({
      el: scrollRef.current,
      smooth: true
    });
  });

  return (
      <div className="scroll" ref={scrollRef}>
        <h1 data-scroll data-scroll-speed="3" data-scroll-position="top">
          Locomotive Scroll in React
        </h1>
      </div>
  );
}