Using Locomotive Scroll makes the page fall down

Question

Using React + Three JS + dat.gui + GSAP + Locomotive Scroll. When I enable loco scroll, this happens: The PAGE when scroll is enabled

  useEffect(() => {
    const locoScroll = new LocomotiveScroll({
      el: document.querySelector('.scroll-container'),
      smooth: true
    })//Whenever I add this part, it makes the page go down and disables scroll.
  }, [])

//THE JSX

  return (
    <div className="scroll-container">
      {loaderAnimated ? <>
        <Background />
        <Cursor/>
        <Navbar width={width} />
        <MainHeading width={width} />
        <SecondSection/>
      </> : <Loader loaded={loaded}
        setLoaderAnimated={() => setLoaderAnimated(true)} />}
      <canvas className="webgl"></canvas>
    </div>
  )
}```

The page goes down and the scroll is no longer working.