I want to have multiple ScrollControls, each with a Scroll. The implementation below makes only the 2nd ScrollControls work as expected, why is the first one broken?

function VerticalScrollContent1() {
  const scroll = useScroll();
  return (
    <group position={[0, -scroll.offset * 5, 0]}>
      <Box position={[-2, 0, 0]} args={[1, 1, 1]} />
      <Box position={[-2, -2, 0]} args={[1, 1, 1]} />
      <Box position={[-2, -4, 0]} args={[1, 1, 1]} />
    </group>
  );
}

function VerticalScrollContent2() {
  const scroll = useScroll();
  return (
    <group position={[0, -scroll.offset * 5, 0]}>
      <Box position={[2, 0, 0]} args={[1, 1, 1]} />
      <Box position={[2, -2, 0]} args={[1, 1, 1]} />
      <Box position={[2, -4, 0]} args={[1, 1, 1]} />
    </group>
  );
}

export default function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <Canvas>
        <ScrollControls
          pages={3}
          distance={0.28}
          infinite={true}
          style={{
            width: "50%",
            left: "0%",
            backgroundColor: "rgba(255,8,8,0.47)",
          }}
        >
        <Scroll>
          <VerticalScrollContent1 />
        </Scroll>
      </ScrollControls>

      <ScrollControls
        pages={3}
        distance={0.28}
        infinite={false}
        style={{
          width: "50%",
          left: "50%",
          backgroundColor: "rgba(0,67,246,0.47)",
        }}
      >
        <Scroll>
          <VerticalScrollContent2 />
        </Scroll>
      </ScrollControls>
      </Canvas>
    </div>
  );
}

What other solutions do we have to implement several scrolls in the same canvas?