Custom BufferGeometry in react-three-fiber

Questions
,
1

Hi,
I want to make a custom geometry using react-three-fiber.
I am new to three.js and at first completed this great tutorial: Three.js Custom BufferGeometry
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: three.js docs

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?

2

/cc