How do I make the ScrollControls to activate scrolling only when the first page of the website is fully scrolled down?

Questions
1

In my website I have included a landing page and then a ScrollControls of React-three-drei component. So when I am halfway down from my landing page to the second page i.e: the ScrollControl component ,and when I move the cursor to that component and then scroll, the ScrollControl component starts scrolling down while the landing page being there. So basically the the ScrollControls component has its own scrol bar and I want to embed that scroll bar to the parent scroll bar. I have tried useState and useEffect but that didn’t work out nicely. These hooks are breaking my animation.

In this code, the Charger component is the landing page and the Model component contains the ScrollControls component.

const App = () => {
  return (
    <BrowserRouter>
      <div
        className="relative z-0 bg-primary bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-gray-900 to-gray-600 bg-gradient-to-r
"
      >
        <Navbar />
        <div className="relative z-0 flex flex-col sm:flex-row">
          <Charger />
        </div>
        <div className=" w-full flex flex-col sm:flex-row ">
          <Model />
        </div>
      </div>
    </BrowserRouter>
  );
};

export default App;

The Model Component code:

const Model = () => {
  return (
    <>
      <Canvas
        style={{
          height: "100vh",
          mt: 5,
        }}
        camera={{ fov: 64, position: [2.3, 4.5, 4.3] }}
        shadows
        gl={{ antialias: false }}
      >
        <ambientLight intensity={1} />
        <OrbitControls enableZoom={false} style={{ height: "50vh" }} />
        <ScrollControls pages={3} maxSpeed={0.5} damping={0.25}>
          <VTol />
          <Works />
        </ScrollControls>
      </Canvas>
    </>
  );
};

export default Model;