Is this the best way to render the sprite position each second using React-Three-Fiber?

Questions
1

I’ve a React project that receives a position, color & camera data from an API. These three data are been stored in main App.js states and I pass these states as a prop to R3F Canvas component.

So far, I can see it is working well. The sprites position keep moving, so does the camera. My concern is, is this the right way to render the sprite animations? Will Canvas keep re-render by passing the App.js states to it?

Here’s my codes for App.js, ThreeCanvas.js & ThreeCamera.js (All are in separate files)

App.js

import ThreeCanvas from "./components/ThreeCanvas"

function App() {
  const [position, setPosition] = useState([])
  const [color, setColor] = useState([])
  const [camera, setCamera] = useState([])

  return (
    <div>
      // These p tags will keep render with the new values
      <p>Color 1: {color[0]}</p>
      <p>Color 2: {color[1]}</p>
      <p>Color 3: {color[2]}</p>
      
      // This is where ThreeCanvas component will be displayed
      <ThreeCanvas position={position} color={color} camera={camera} />
    </div>
  )
}

ThreeCanvas.js

import spriteIdleTextureImg from "../img/sprite.png"
import ThreeCamera from "./ThreeCamera"

const spriteIdleTexture = new THREE.TextureLoader().load(spriteIdleTextureImg)

function ThreeCanvas({ position, color, camera }) {

  return (
    <>
      <Canvas colorManagement>

        // The position & color value will keep changing
        <sprite position={[position[0][0], 0, position[0][1]]}>
          <spriteMaterial map={spriteIdleTexture} color={color[0]} />
        </sprite>
        <sprite position={[position[1][0], 0, position[1][1]]}>
          <spriteMaterial map={spriteIdleTexture} color={color[1]} />
        </sprite>
        <sprite position={[position[2][0], 0, position[2][1]]}>
          <spriteMaterial map={spriteIdleTexture} color={color[2]} />
        </sprite>

        <ThreeCamera camera={camera} />
      </Canvas>
    </>
  )
}

ThreeCamera .js

function ThreeCamera ({ camera }) {

  useFrame(state => {
    
    // The camera state will keep changing based on the camera props data
    state.camera.fov = THREE.MathUtils.radToDeg(camera.fov)
    state.camera.near = camera.near
    state.camera.far = camera.far
    state.camera.aspect = camera.aspect
    state.camera.updateProjectionMatrix()
    state.camera.position.set(...camera.eye)
    state.camera.up.set(...camera.up)
    state.camera.lookAt(...camera.at)
  })

  return null
}
2

/cc