Nested Scroll Support in @react-three/drei ScrollControls

[IAlphaOmegaI]

Problem

Currently trying to implement nested scroll areas using ScrollControls from @react-three/drei. The specific use case is having a main page scroll with a separately scrollable area within one of the sections.

Minimal implementation further below!

// Current implementation that doesn't work
function Scene() {
  return (
    <Canvas>
      <ScrollControls pages={2}>
        <Scroll>
          <Box>
            <TitleSection />
          </Box>
          <Box>
            {/* This nested scroll doesn't work properly */}
            <ScrollControls>
              <Scroll>
                <ProjectsList />
              </Scroll>
            </ScrollControls>
          </Box>
        </Scroll>
      </ScrollControls>
    </Canvas>
  );
}

Expected Behavior

Main scroll should control the transition between pages (TitleSection → ProjectsSection)
Once on the ProjectsSection, a separate scroll area should control the ProjectsList independently
The main scroll should be disabled when scrolling the ProjectsList
Other elements in ProjectsSection should remain fixed while ProjectsList scrolls

Current Behavior

Nested ScrollControls doesn't recognize events at all

Questions:

Is nested scroll supported in ScrollControls?
If not, what's the recommended approach for implementing nested scroll areas?
Are there any examples of implementing this pattern with @react-three/drei?

Minimal Example

Here's a complete minimal example demonstrating the issue:

import { Canvas } from "@react-three/fiber";
import { ScrollControls, Scroll } from "@react-three/drei";

export default function App() {
  return (
    <Canvas>
      <ScrollControls pages={2}>
        <Scroll>
          <Box position={[0, 0, 0]}>Page 1</Box>
          <Box position={[0, -100, 0]}>
            <ScrollControls pages={5}>
              <Scroll>
                {/* This nested content doesn't scroll independently */}
                <Box>Nested Item 1</Box>
                <Box>Nested Item 2</Box>
                <Box>Nested Item 3</Box>
              </Scroll>
            </ScrollControls>
          </Box>
        </Scroll>
      </ScrollControls>
    </Canvas>
  );
}

Environment:

@react-three/fiber: 8.17.10
@react-three/drei: [9.120.4
React: 18.3.1

Additional Context

If nested scroll isn't supported, would be great to have guidance on:

1. Best practices for implementing nested scroll
2. Alternative approaches (e.g., custom scroll implementation)
3. Examples of similar patterns in other projects