我正在开发一个React Three Fiber应用程序，并使用@react-three/drei中的useProgress钩子来跟踪我的资产的加载进度。然而，我遇到了一个问题，进度值总是保持在0，因此，我的加载屏幕组件上的“开始”按钮保持禁用。我尝试了各种方法，无法找出这个问题的根本原因。
下面是我的应用程序结构的概述：

应用组件：

import { Canvas } from '@react-three/fiber'
import { Suspense, useEffect, useState } from 'react'
import Experience from './Experience'
import { LoadingScreen } from './LoadingScreen'

const audio = new Audio('./hit.mp3')

function App() {
  const [start, setStart] = useState(false)

  useEffect(() => {
    if (start) {
      audio.play()
    }
  }, [start])

  return (
    <>
      <Canvas
        // ...
      >
        <Suspense fallback={null}>{start && <Experience />}</Suspense>
      </Canvas>
      <LoadingScreen started={start} onStarted={() => setStart(true)} />
    </>
  )
}

export default App

LoadingScreen组件：

import { useProgress } from '@react-three/drei'
import { useEffect } from 'react'

export const LoadingScreen = ({ started, onStarted }) => {
  const { progress } = useProgress()

  useEffect(() => {
    let interval

    interval = setInterval(() => {
      console.log(`Progress: ${progress}%`)
    }, 1000)

    return () => {
      clearInterval(interval)
    }
  }, [progress])
  return (
    <div className={`loadingScreen ${started ? 'loadingScreen--started' : ''}`}>
      <div className='loadingScreen__progress'>
        <div
          className='loadingScreen__progress__value'
          style={{
            width: `${progress}%`,
          }}
        />
      </div>
      <div className='loadingScreen__board'>
        <h1 className='loadingScreen__title'>Title</h1>
        <button
          className='loadingScreen__button'
            disabled={progress < 100}
          onClick={onStarted}
        >
          Start
        </button>
      </div>
    </div>
  )
}

我已经确保了资产路径是正确的，并且我正在使用useGLTF钩子来加载模型。然而，尽管如此，useProgress钩子从不更新progress值。
如果有人遇到类似的问题，或者对useProgress可能无法按预期工作的原因有深入的了解，我将非常感谢您在诊断和解决此问题方面的帮助。