Box Collider in Rapierjs not Syncing with Box Mesh Object.

[@paradise_hope]

import { OrbitControls, useAnimations, useGLTF } from "@react-three/drei";
import { Physics, RigidBody } from "@react-three/rapier";
import { useEffect, useRef } from "react";
import { Canvas } from "react-three-fiber";
import * as THREE from 'three'
import React from "react";
import { useFrame } from "react-three-fiber";
import { useBox } from "@react-three/rapier";
import { useState } from "react";
import { useRapier, Collider } from "@react-three/rapier";
function Box(props) {
const meshRef = useRef();
const [position, setPosition] = useState([0, 0, 0]);
// Use useFrame to animate the mesh
useFrame(() => {
if (meshRef.current) {
meshRef.current.position.set(...position);
}
});
// Event listener for keyboard input
const handleKeyDown = (event) => {
const speed = 0.1; // Adjust as needed
switch (event.key) {
case 'w':
setPosition([position[0], position[1], position[2] - speed]);
break;
case 'a':
setPosition([position[0] - speed, position[1], position[2]]);
break;
case 's':
setPosition([position[0], position[1], position[2] + speed]);
break;
case 'd':
setPosition([position[0] + speed, position[1], position[2]]);
break;
default:
break;
}
};
// Attach event listener when the component mounts
React.useEffect(() => {
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [position]);
return (


);
}
const Scene = () => {
const { scene, animations } = useGLTF('./hallwb.glb');
const group = useRef();
const { actions } = useAnimations(animations, group);
return (





);
};
const App = () => {
return (


);
};
export default App;