how to rotate the joints of an URDF Model using DAT.GUI in three.js

Question

 import * as THREE from "three";
 import OrbitControls from "three-orbitcontrols";
 import URDFLoader from "urdf-loader";
 import * as  dat from 'dat.gui';


const gui = new dat.GUI();
const controls = {
    BJ: 0, // Joint angles for each joint
    
};
gui.add(controls, 'BJ', -180, 180).name('Base Joint'); // Adjust range as needed

class RobotScene extends Component {
    constructor(props) {
        super(props);
        this.state = {
            sliderData: {}
        };
        // Setting up the initial state and references
        this.scene = new THREE.Scene();
        this.camera = null;
        this.renderer = null;
        this.robotBase = null; // Reference to the robot's base



        this.initScene();
        this.addRobot();
        this.addControls();
        this.startAnimationLoop();
        window.addEventListener('resize', this.handleWindowResize);
    }


    initScene() {
        // Set up camera
        this.camera = new THREE.PerspectiveCamera(
            75, // fov = field of view
            window.innerWidth / window.innerHeight, // aspect ratio
            0.1, // near plane
            1000 // far plane
        );
        this.camera.position.z = 5; // Move the camera back

        // Set up renderer
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this.renderer.domElement); // Append to the document body

        // Set up orbit controls
        new OrbitControls(this.camera, this.renderer.domElement);

        // Set up lighting
        const ambientLight = new THREE.AmbientLight(0x404040);
        this.scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(1, 1, 1);
        this.scene.add(directionalLight);
    }

    addRobot() {
        const loader = new URDFLoader();
        loader.load("/robot_active.urdf", (robot) => {
            this.robotBase = robot; // Assuming the robot base is the root of the loaded URDF model
            this.scene.add(robot);
        });
    }

    updateRobotJoints() {
        if (this.robotBase) {
            // Replace these names with the actual joint names from your URDF file
            const BJ = this.robotBase.getObjectByName('BJ');
            

            if (BJ) {
                const BJRotationRadians =  THREE.MathUtils.degToRad(controls.BJ);
                BJ.rotation.z = THREE.MathUtils.clamp(BJRotationRadians, -2.0944, 2.0944);
            }

           
        }
    }




    startAnimationLoop = () => {

        this.updateRobotJoints(); // Update the robot joints in each frame
        // Animation loop
        this.renderer.render(this.scene, this.camera);
        
        // Update any animations or rendering operations here

        // Keep looping
        this.frameId = window.requestAnimationFrame(this.startAnimationLoop);
    };

    handleWindowResize = () => {
        // Update camera and renderer on window resize
        const width = window.innerWidth;
        const height = window.innerHeight;
        this.renderer.setSize(width, height);
        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();
    };

    render() {
        return null; // No need to render anything in this component
    }
}

export default RobotScene;``

`

The above is my code where i am able to load my urdf and able to add control using DAT.GUI but i am not being able to make movement of the joints and neither my urdf model is being rotated in the application. I don't know what is the problem in the code that slider is not being able to get connect with the joints and the movement is not happening If i am able to achieve this it will work as a simulation tool for me