How to make scrollarea in react-three/fiber?

Question

I wanted to understand and modify this webpage: https://github.com/thedevelobear/react-three-fibear.

I created multiple files and wanted to combine them as a scrollable menu in r3f. All the effects work perfectly but I really don't know how to make the list of Logos scrollable while still letting them be clickable :-/. If anyone can help me figure out the js and css part for the scrollarea I would really appreciate it.

I load them like this in the app part:

<Suspense fallback={null}>
            <Logo />
          </Suspense>
          <Suspense ...>
            <Logo2/>
             ...

and the Logo part:

const group = useRef()
  const geometry = useRef();
  const material = useRef();
  const logo = useLoader(THREE.TextureLoader, process.env.NODE_ENV === "/logo.png");
  const scaleX = 0.1 * size;
  const scaleY = 0.04 * size;
  const scaleZ = 0.1;
  const state = {  mouse: [0, 0] }


    const [spring, setSpring] = useSpring(() => ({
        scale: [scaleX, scaleY, scaleZ],
        config: { mass: 3, friction: 40, tension: 800 }
    }));

    const bindHover = useHover(
        ({ hovering }) =>
            setSpring({ scale: hovering ? [1.2 * scaleX, 1.2 * scaleY, 1.2 * scaleZ] : [scaleX, scaleY, scaleZ] }),
        {
            pointerEvents: true
        }
    );

  return (
    <a.group className="link" {...props} scale={[0.1 * size, 0.04 * size, 0.1]} {...spring} {...bindHover()} onClick={() => window.location.href = 'https://thedevelobear.com'}>
      <group ref={group}>
      <mesh
        args={[geometry, material]}
        position={[0, 0, -20]}
        receiveShadow
        castShadow
      >
        <planeGeometry ref={geometry} attach="geometry" />
        <meshPhongMaterial
          transparent
          ref={material}
          attach="material"
          map={logo}
        />
      </mesh>
      </group>
    </a.group>
  );
};