BoxGeometry, EdgesGeometry, LineBasicMaterial, LineSegments issue in ThreeJSFiver

[G1anpierre]

I have the following code in ThreeJS, which allowed me to draw squares (only its borders).

const createEdgesGeometry = (color = 'pink') => (x, y, z) => {
   const squareGeometry = new THREE.BoxGeometry(1, 1, 0) 
   const squareEdges = new THREE.EdgesGeometry(squareGeometry) 
   const squareMaterial = new THREE.LineBasicMaterial({color}) 
   const square = new THREE.LineSegments(squareEdges, squareMaterial) 
   square.position.set(x, y, z) // Set the position of the square
   return square
 }


 const edgeSquare = createEdgesGeometry('red')(2.5, 1.5, 0)
 scene.add(edgeSquare)

I need to get the same result but in ThreeJs Fiber code. how this could be possible? , my approach is not really working. I appreciated any suggestions.

<mesh position={[6, 1, 0]}>
         <lineSegments>
           <boxGeometry args={[4.5, 4, 0]} />
           <lineBasicMaterial color="green" />
         </lineSegments>
</mesh>

Thanks for your support!