Problem with locomotivescroll nextjs typescript working

Question

I'm trying to use locomotive-scroll in a Next.js component with TypeScript, but I've encountered a significant problem. While incorporating it into a React project posed no issues, and everything functioned as expected,

function App() {
  const scroll = new LocomotiveScroll({
    el: document.querySelector("[data-scroll-container]"),
    smooth: true,
    multiplier: 0.6,
    class: "is-reveal",
  });

  return (
    <div className="App" data-scroll-container>
      <div className="container" data-scroll-section>
        <h1 data-scroll>Locomotive scroll</h1>
      </div>
      <div className="container container-img" data-scroll-section>
        <img
          data-scroll-speed="0.4"
          data-scroll
          src="https://img.freepik.com/darmowe-zdjecie/widok-z-gory-pyszne-aranzacje-cytryn_23-2149433490.jpg?t=st=1711656683~exp=1711660283~hmac=132360f110b3c00e27b97d13c4cf074465858ce18ec1de395421a9dac8dc5405&w=360"
          className="App-logo2"
          alt="logo"
        />
        <img
          data-scroll 
          src="https://img.freepik.com/darmowe-zdjecie/kolorowy-kolaz-punkrockowy_23-2150072269.jpg?t=st=1711656653~exp=1711660253~hmac=eba14612169dca6e804d889434ff12b0908e385497fdd8ebf0d47fe076d32174&w=740"
          className="App-logo"
          alt="logo"
        />
      </div>
    </div>
  );
}

export default App;

I'm running into a substantial obstacle in Next.js with TypeScript, despite having the beta version of Locomotive installed. Do you know how I can resolve this issue to ensure the code operates correctly across all sections as I append data-scroll? How can I configure it globally? I've seen tutorials suggest adding it to the Page component, but that approach isn't feasible for me since I utilize metadata and the use client directive is incompatible.

When I render the code in the component, the image moves beyond the page area and fails to revert to its original state. Inspecting the transform in the browser shows that it ceases at a certain point and doesn't return to the prior state.

Very thx!

My Nextjs code with TS in the component -

function Monitoring() {
    useEffect(() => {
        const startLocomotiveScroll = async () => {
            const LocomotiveScroll = (await import("locomotive-scroll")).default;
            const scroll = new LocomotiveScroll({
                el: document.querySelector("[data-scroll-container]"),
                smooth: true,
                multiplier: 1,
                class: "is-reveal",
            });
        };

        startLocomotiveScroll();
    }, []);

    return (
        <div data-scroll-container className="monitoring sectionFull overflow-hidden ">
            <div className="top flex h-2/5  flex-col items-center justify-center bg-black py-24 text-white">
                <div className="container flex justify-center ">
                    <div className="boxs flex flex-row items-center justify-center gap-24  ">
                        <CounterLayout />
                    </div>
                </div>
            </div>
            <div className="bottom relative flex flex-col items-center justify-center" data-scroll-container>
                <div className="container flex justify-center  " >
                    <div className="left -mt-24 flex flex-1 justify-center" data-scroll-section>
                        <Image
                            data-scroll
                            
                            className={Styles.img}
                            src="/assets/images/2.jpg"
                            alt="monitoring"
                            width={550}
                            height={700}
                        />
                    </div>.....