Three Fiber, changing Line to MeshLine, cannot make it work

[tilnea]

Hi, I'm using React Three Fiber and I want to change my "Line" to a "MeshLine" since I want to set a width on it. But I cannot make it work, what am I doing wrong?

Code:

import React, { useEffect, useRef } from "react";

import { extend } from "react-three-fiber";

extend({ MeshLine, MeshLineMaterial });

function makeLine(geometryRef, testMesh, points) {
  var anchors = [];
  for (let key in points) {
    anchors.push(new THREE.Vector3(...points[key]));
  }

  /* geometryRef.current.setFromPoints(anchors);
  geometryRef.current.computeBoundingSphere(); */

  console.log(anchors);

  testMesh.current.setFromPoints(anchors);
  testMesh.current.computeBoundingSphere();
}

const Line = React.memo(({ color, points }) => {
  const geometryRef = useRef();
  const testMesh = useRef();

  useEffect(() => {
    makeLine(geometryRef, testMesh, points);
  }, [points]);

  return (
    <group>
      <mesh raycast={MeshLineRaycast}>
        <meshLine
          attach="geometry"
          ref={testMesh}
          /* points={anchors}  */
        />
        <meshLineMaterial
          attach="material"
          transparent
          depthTest={false}
          lineWidth={1}
          color={"red"}
          dashArray={0.05}
          dashRatio={0.95}
        />
      </mesh>
      {/* <line>
        <bufferGeometry attach="geometry" ref={geometryRef} />
        <lineBasicMaterial attach="material" color={color} />
      </line> */}
    </group>
  );
});

export default Line;

The print of "anchors" they look like this:

0: Vector3 {x: -200.77734375000003, y: 59.70703125000001, z: 0, isVector3: true} 1: Vector3 {x: -123.87890624999999, y: -44.554687499999964, z: 0, isVector3: true}