Need help converting three.js snippet to React Three Fiber

Question

I'm trying to follow a tutorial on three.js, but coding it in React three fiber. Am stuck with the following snippet, to create a block, with line and edge geometries. Can anyone help, I basically need to convert it to R3F?

three.js:
function Block(x, y, z){
    this.x = x;
    this.y = y;
    this.z = z;

    this.display = function(){
        var blockBox = new THREE.BoxBufferGeometry(5, 5, 5); // w, h, d
        var blockMesh = new THREE.MeshBasicMaterial({color : 0x00ff00});
        var block = new THREE.Mesh(blockBox, blockMesh);
        scene.add(block);
        block.position.x = this.x;
        block.position.y = this.y - 10;
        block.position.z = this.z;

        var edges = new THREE.EdgesGeometry(blockBox);
        var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color : 0x000000}));
        scene.add(line);
        line.position.x = this.x;
        line.position.y = this.y - 10;
        line.position.z = this.z;
    }
}

What I have in React three fiber so far:

const Block = ({ x, y, z }) => {
    return (
        <mesh visible={true} position={[x, y, z]} scale={[1, 1, 1]}>
            <boxGeometry />
            <meshBasicMaterial wireframe color={"green"} />


            <lineSegments >
                <edgesGeometry />


            </lineSegments>
        </mesh>
    );
}

Basically need help converting the snippet to R3F