3D Character rolls with sphere

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!!