I am trying to use dat.gui in my project with react-three-fiber. I have a custom component named Cube that encapsulates a mesh like this:

import React from "react";

class Cube extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            position: props.position,
        }
    }

    componentDidUpdate(prevProps){

        if(prevProps.position[0] !== this.state.position[0]){

            console.log("update");

            this.setState({          
                position: this.props.position,
            });
        }
    }

    render() {
        return(
            <mesh position={this.state.position} onUpdate={()=>{console.log("mesh")}} >
                <boxGeometry attach="geometry" args={[0.5,0.5,0.5]}/>
                <meshStandardMaterial attach="material" color="#ff0000"/>
            </mesh>
        )
    }
}

export default Cube;

But when I change the position prop of my Cube component in my main App.js (using dat.gui), the prop and the state of the parent component is updated (I have seen it debugging) but it seems that the child mesh is not updating its position.

App.js content:

import { OrbitControls } from "@react-three/drei";
import { Canvas } from '@react-three/fiber';
import * as dat from 'dat.gui';
import { useEffect, useRef } from 'react';
import './App.css';
import Lights from './components/Lights';
import Cube from './components/Cube';

function App() {
  const cube = useRef();

  useEffect(() => {

    const gui = new dat.GUI({ width: 400 });

    const debugObject = {
      position: {
        x: 0,
        y: 0,
        z: 0,
      }
    }

    console.log(debugObject.position.x)

    gui.add(debugObject.position, "x")
      .min(-10)
      .max(10)
      .step(0.1)
      .onChange(() => {
        console.log(cube.current)
        cube.current.props.position[0] = debugObject.position.x;
        console.log(debugObject.position.x)
        console.log(cube.current)
      });

    return () => {
      gui.destroy()
    }

  });

  return (
    <div className="App">
      <Canvas
        camera={{
          fov: 75,
          aspect: 2,
          near: 0.1,
          far: 1000,
          position: [0,0,20],
          rotation: [0,0,0]
        }}
      > 
          <color attach="background" args={["#161c24"]}/>
          <Lights/>
          <Cube ref={cube} position={[0,0,0]}/>
          <OrbitControls/>
      </Canvas>

    </div>
  );
}

export default App;

Sorry if I am missing something obvious i am starting with this library.