react-three/fiber creating 3D text

Question

I'm trying to create 3d text using Threejs + react-three/fiber . I loaded the font using font loader like this :

  const font = new FontLoader().parse('/Microsoft Tai Le_Regular.json');

After that I tried to use component inside the mesh , for some reason it didn't work, any other type of Geometry would work .

    <mesh>
      <textGeometry /> // this can't even be compiled ( maybe it has to do with typescript
    </mesh>

With that problem , I tried to create the textGeometry on js instead of jsx So I did this :

     const textOptions = {
    font: font,
    size: props.size,
    height: props.height,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelOffset: 0,
    bevelSegments: 5
  };
  
  const textGeo = new TextGeometry(props.text, textOptions);

and Passed 'textGeo' to mesh geometry prop

<mesh
  geometry={textGeo}
>

still didn't work and gave this error : can't access property "yMax", data.boundingBox is undefined

Thanks for your help,