使用useFrame动画React Three Fiber Box组件时遭遇WebGL上下文丢失错误

我尝试使用useFrame为React Three Fiber的drei Box组件制作尺寸动画，添加useFrame函数前几何效果正常，但添加后浏览器抛出THREE.WebGLRenderer: Context Lost错误，且无法进行重渲染。

import React, {useRef} from 'react';
import { Box } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

export default function BarGraph() {
  const purpleColor = "#5b21b6";
  const barRef1 = useRef();

  useFrame(
    (state) => {
      barRef1.current.parameters.depth = Math.sin(state.clock.elapsedTime) + 3;
    }
  )

  return (
    <mesh position={[0,1,1]} scale={0.5}>
      <Box args={[1,1,3]} position={[1,3,2]} ref={barRef1}>
        <meshStandardMaterial color={purpleColor}/>
      </Box>
    </mesh>
  )
}

我也曾尝试将useFrame内的代码替换为barRef1.current.args = [1,1,Math.sin(state.clock.elapsedTime) + 3]，但结果相同。我推测是浏览器图形能力过载，但不清楚具体原因，也不知道如何在useFrame中进行节流。

更新：

我通过访问并修改scale属性的方式实现了预期效果。

useFrame(
  (state) => {
    barRef1.current.scale.y = Math.sin(state.clock.elapsedTime) + 3;
  }
)

内容的提问来源于stack exchange，提问作者Jacob Rita