Help using Text Geometry

[phil-kt]

I'm trying to use TextGeometry on my Gatsby site but I can't get it to render.

At first I encountered errors like maxY undefined and font parameter is not an instance of THREE.Font which I think I managed to resolve by moving the font I'm loading into the public folder. However nothing renders on my site despite having no errors.

import * as React from "react"
import { Canvas, useFrame, useLoader} from "@react-three/fiber"
import { FontLoader } from "three/src/loaders/FontLoader"

function Text(props) {
  const mesh = React.useRef()
  const font = useLoader(FontLoader, "./helvetiker_regular.json")
  const config = React.useMemo(
   () => ({ font, size: 40, height: 30, curveSegments: 32, bevelEnabled: true, bevelThickness: 6, bevelSize: 2.5, bevelOffset: 0, bevelSegments: 8 }),
   [font]
  )
  return (
    <mesh
      {...props}
      ref = {mesh}
    >
      <textGeometry args={["hello this is a test", config]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}

and the render function

const Home = ({ data, location }) =>  {
  const siteTitle = data.site.siteMetadata?.title || `Title`
  return (
    <Layout location={location} title={siteTitle}>
      <Seo title="Home" />
      <React.Suspense fallback={null}>
        <Canvas className="canvas">
          <ambientLight color={0xffffff} />
          <Text position={[0, 0, 0]} />
        </Canvas>
      </React.Suspense>
    </Layout>
  )
}

export default Home

Is it because the font needs to be called as a callback function from the loader? But I didn't see anything like that in the demo that uses TextGeometry from the doc examples. Any help would be appreciated!

Link to source:
https://github.com/LinkCable/quatro/blob/main/src/pages/index.js