THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN - three.js

Question

I've found this question asked before but the solutions offered did not solve my issue. I've tried creating this project in only #react-three but I've added vanilla three and cannon to supplement my #react-three (therefor my code is convoluted).
This error only occurs on rounded TextGeometry and I've been able to duplicate the error in a Codesandbox example.
I've tried:
Adding and removing computeBoundingBox() and computeBoundingSphere()
Removing the array from around my position const
I've added width segment and height segment parameters to PlaneBufferGeometry
Incorporating code I found in examples that had rounded TextGeometry
Here is the function for the TextGeometry:
// const position = [pos.x / 4, pos.y / 8, 2];
export function Font({ letter, position: initialPosition }) {
const { size, viewport } = useThree();
const [position, setPosition] = useState(initialPosition);
const [quaternion, setQuaternion] = useState([0, 0, 0, 0]);
const aspect = size.width / viewport.width;
const font = new FontLoader().parse(Roboto);
const textOptions = {
font,
size: 1,
height: 0,
curveSegments: 0,
bevelEnabled: true,
bevelThickness: 0.3,
bevelSize: 0.1,
bevelOffset: -0.01,
bevelSegments: 12
};
const letterGeom = new TextGeometry(
letter,
textOptions
);
letterGeom.computeBoundingBox();
letterGeom.computeBoundingSphere();
const letterMat = new THREE.MeshLambertMaterial();
const letterMesh = new THREE.Mesh(letterGeom, letterMat);
letterMesh.size = letterMesh.geometry.boundingBox.getSize(new THREE.Vector3());
const box = new CANNON.Box(new CANNON.Vec3().copy(letterMesh.size).scale(0.5));
const { center } = letterMesh.geometry.boundingSphere;
const { ref, body } = useCannon({ bodyProps: { mass: 10 } }, body => {
body.addShape(box, new CANNON.Vec3(center.x, center.y, center.z));
body.position.set(...position);
}, []);
const bind = useDrag(({ offset: [,], xy: [x, y], first, last }) => {
if (first) {
body.mass = 0;
body.updateMassProperties();
} else if (last) {
body.mass = 10000;
body.updateMassProperties();
}
body.position.set((x - size.width / 2) / aspect, -(y - size.height / 2) / aspect, -0.7);
}, { pointerEvents: true });
useFrame(() => {
const deltaX = Math.abs(body.position.x - position[0]);
const deltaY = Math.abs(body.position.y - position[1]);
const deltaZ = Math.abs(body.position.z - position[2]);
if (deltaX > 0.001 || deltaY > 0.001 || deltaZ > 0.001) {
setPosition(body.position.clone().toArray());
}
const bodyQuaternion = body.quaternion.toArray();
const quaternionDelta = bodyQuaternion.map((n, idx) => Math.abs(n - quaternion[idx]))
.reduce((acc, curr) => acc + curr);
if (quaternionDelta > 0.01) {
setQuaternion(body.quaternion.toArray());
}
});
// extend TextGeometry to THREE
extend({ TextGeometry })
return (
<mesh ref={ref} castShadow position={position} quaternion={quaternion} {...bind()}
onClick={e => {
e.stopPropagation();
}}
>
<textGeometry attach='geometry' args={[letter, textOptions]} />
<meshLambertMaterial attach='material' color="lightcoral" />
</mesh>
);
}
Here is the error in console:
THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.
TextGeometry {isBufferGeometry: true, uuid: '49e5c324-9134-407e-962f-6ff170a6afb7', name: '', type: 'TextGeometry', index: null, …}
attributes:
normal: BufferAttribute {isBufferAttribute: true, name: '', array: Float32Array(12852), itemSize: 3, count: 4284, …}
position: Float32BufferAttribute
array: Float32Array(12852) [NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, 0.0689999982714653, 0.4771421253681183, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, 0.8880000114440918, 0.5088578462600708, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, NaN, -0.30000001192092896, NaN, …]
count: 4284
isBufferAttribute: true
itemSize: 3
name: ""
normalized: false
updateRange: {offset: 0, count: -1}
usage: 35044
version: 0
[[Prototype]]: BufferAttribute
uv: Float32BufferAttribute {isBufferAttribute: true, name: '', array: Float32Array(8568), itemSize: 2, count: 4284, …}
[[Prototype]]: Object
boundingBox: Box3 {isBox3: true, min: Vector3, max: Vector3}
boundingSphere: Sphere
center: Vector3
x: 0.47850000485777855
y: 0.49300000071525574
z: 0
[[Prototype]]: Object
radius: NaN
[[Prototype]]: Object
drawRange: {start: 0, count: Infinity}
groups: (2) [{…}, {…}]
index: null
isBufferGeometry: true
morphAttributes: {}
morphTargetsRelative: false
name: ""
parameters: {shapes: Array(1), options: {…}}
type: "TextGeometry"