使用useRef钩子的React Fiber Mesh元素,“ref.current”可能是“未定义的”

环境
Next JS,TypeScript,React Fiber

代码段

import { useFrame } from '@react-three/fiber'
import React, { useRef, useState } from 'react'

interface PolyhedronCanvasProps {
    position: [number, number, number],
    polyhedron: any
}

const PolyhedronCanvas = ( props: PolyhedronCanvasProps ) => {
    const ref = useRef()     
    const [count, setCount] = useState(0)

    useFrame((_, delta) => {  
        ref.current.rotation.x += delta
        ref.current.rotation.y += 0.5 * delta
    })

    return (
        <mesh 
            position={props.position}
            ref={ref}            
            onPointerDown={() => setCount((count + 1) % 3)}
            geometry={props.polyhedron[count]}
        >
            <meshPhongMaterial color={'lime'} wireframe/>
        </mesh>
    )
}

export default PolyhedronCanvas    

ref.current.rotation.x += delta
ref.current.rotation.y += 0.5 * delta

我可能可以运行下一个js应用程序,但在这两行中仍然出现TypeScript错误 'ref.current' is possibly 'undefined'

同样,我可以运行该项目,但我想删除TypeScript错误,这会使我的jsx文件在VS代码中变红。