THREE JS computeBoundingBox

Question

i am working on this react project, its using threeJs objects, i upgraded the version of threeJs and this part of the code stated showing this error .

  Text.js:16 Uncaught TypeError: self.geometry.computeBoundingBox is not a function  

the part of the code that causes this problem is the following

  const data = useLoader(FontLoader, font)
  const geom = useAsset(() => new Promise((res) => res(new TextBufferGeometry(children, { font: data, size: 1, height, curveSegments: 32 }))), [children])
  const onUpdate = useCallback(
    (self) => {
        const box = new Vector3()
        self.geometry.computeBoundingBox(box)
        self.geometry.boundingBox.getSize(box)
      self.position.x = left ? 0 : right ? -box.x : -box.x / 2
      self.position.y = top ? 0 : bottom ? -box.y : -box.y / 2
    },
    [left, right, top, bottom]
  )

  const ref = useRef()
  let last = state.top.current
  useFrame(() => {
    ref.current.shift = lerp(ref.current.shift, (state.top.current - last) / 100, 0.1)
    last = state.top.current
  })

  return (
    <group {...props} scale={[size, size, 0.1]}>
      <mesh geometry={geom} onUpdate={onUpdate} frustumCulled={false}>
        <customMaterial ref={ref} color={color} transparent opacity={opacity} />
      </mesh>
    </group>
  )
}

i am looking for the way i am supposed to adjust this code to work in the new version