How to animate a camera after getting a JSON file from @theatre/core with react three fiber?

Question

After removing the studio from main.jsx the camera stops at the first frame. The only way i got it to move is using scroll but i want the animation to start when first getting in the website and stopping. here's App.jsx:

    import { Canvas, useFrame  } from '@react-three/fiber';
import './App.css';
import { Test } from './components/test';
import { getProject, val } from '@theatre/core';
import { SheetProvider , PerspectiveCamera, useCurrentSheet} from '@theatre/r3f';
import flyThroughState from './assets/CamAni.json';
function App() {
  const sheet = getProject('Fly Through',{state: flyThroughState}).sheet("Scene")
  return (
    <>
    <Canvas  gl={{ preserveDrawingBuffer: true }}>
         <SheetProvider sheet={sheet}>
          <Scene />
        </SheetProvider>
    </Canvas>
    </>
  )
}
export default App

how can i get the camera to animate with the json file i got from Fly Through ?

Answer 1

If anyone need this in the futur, here's the code I fixed it.

    function App() {
  const sheet = getProject('Fly Through',{state: flyThroughState}).sheet("Scene")
    useEffect(() => {
      sheet.project.ready.then(() => sheet.sequence.play({ iterationCount:1, range: [0, 3] }))
    }, [])
  
  return (<>
    <Canvas  gl={{ preserveDrawingBuffer: true }}>

         <SheetProvider sheet={sheet}>
          <Scene />
        </SheetProvider>
    </Canvas>
    </>
  )
}

export default App