Custom BufferGeometry in react-three-fiber

I want to make a custom geometry using react-three-fiber. I am new to three.js and at first completed this great tutorial: https://threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.html All went well, but then I decided to fascilitate my app with react. I couldn't figure out how to declaratively create a custom shape. All I found on the official API was:

<bufferGeometry attach="geometry">
  <bufferAttribute attachObject={['attributes', 'position']} count={v.length / 3} array={v} itemSize={3} />

So I tried it with the basic example from here: https://threejs.org/docs/#api/en/core/BufferGeometry

const vertices = new Float32Array( [
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,

     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0, -1.0,  1.0
] );

The above code is located inside a custom functional component, which is put on the canvas. The return statement looks like this:

  return (
    <mesh>
      <bufferGeometry>
        <bufferAttribute
          attachObject={["attributes", "position"]}
          array={vertices}
          itemSize={3}
        />
      </bufferGeometry>
      <meshNormalMaterial />
    </mesh>
  );

But nothing displays. How do you create custom geometry from arrays of coordinates and normals using react-three-fiber?