3D Character rolls with sphere - react-three-fiber

Question

I am trying to make a spider have a certain velocity when control keys are pressed using react three cannon. The 3D model rolls along with the sphere.
The code is as follows:
// import { useFBX } from "#react-three/drei"
import { useSphere } from "#react-three/cannon"
import { useAnimations } from "#react-three/drei"
import { useLoader } from "#react-three/fiber"
import { useEffect, useState } from "react"
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
const Spider = (props) => {
const [position, setPosition] = useState(props.position)
const model = useLoader(FBXLoader, '../assets/models3D/spider/Spider.fbx')
console.log(model)
const animations = useAnimations(model.animations, model)
const actions = {
jump: {
anim: animations.actions["Spider_Armature|Jump"],
keys: [' '],
active: false
},
normal: {
anim: animations.actions["Spider_Armature|normal"],
keys: [],
active: false
},
wait: {
anim: animations.actions["Spider_Armature|warte_pose"],
keys: [],
active: true
},
walkForward: {
anim: animations.actions["Spider_Armature|walk_ani_vor"],
keys: ['ArrowUp', 'w'],
active: false
},
walkBackward: {
anim: animations.actions["Spider_Armature|walk_ani_back"],
keys: ['ArrowDown', 's'],
active: false
},
walkLeft: {
anim: animations.actions["Spider_Armature|walk_left"],
keys: ['ArrowLeft', 'a'],
active: false
},
walkRight: {
anim: animations.actions["Spider_Armature|walk_right"],
keys: ['ArrowRight', 'd'],
active: false
},
}
const [ref, api] = useSphere(() => ({ mass: 1, position: position, allowSleep: false, type: "Dynamic" }))
useEffect(() => {
actions.wait.anim.play()
window.addEventListener("keydown", ({ key }) => {
Object.keys(actions).forEach(i => {
let action = actions[i]
if (action.keys.indexOf(key) > -1) {
action.active = true
action.anim.play()
api.velocity.set(0, 0, -1);
}
})
})
window.addEventListener("keyup", ({ key }) => {
Object.keys(actions).forEach(i => {
let action = actions[i]
if (action.keys.indexOf(key) > -1) {
action.active = false
action.anim.stop()
api.velocity.set(0, 0, 0);
}
})
})
}, [])
return (<>
<primitive object={model} scale={0.05} position={position} ref={ref} />
</>)
}
export default Spider
How can the spider move along with the sphere without rolling? What could be a solution if useBox was used instead? Is reducing friction a good idea? If so how can it be done.
Please pardon my newness and thanks in advance!!