I am trying to render some animations from my .glb file. There are 4 animations in the file. I am using Next.js paired with Three.js (and react-three-fiber), so I would like to use JSX components for this, instead of using the traditional HTML. This is the code I have so far:

function Scene() {
    const gltf = useLoader(GLTFLoader, '/drone1_spin.glb')
    const mesh = useRef()

    // This is where i'm having issues as I do not know how to render all 4 animations

    const [mixer] = useState(() => new THREE.AnimationMixer())
    useEffect(
        () => {
            void mixer.clipAction(gltf.animations[0], mesh.current).play()
            void mixer.clipAction(gltf.animations[1], mesh.current).play()
            void mixer.clipAction(gltf.animations[2], mesh.current).play()
            void mixer.clipAction(gltf.animations[3], mesh.current).play()
        },
        [gltf.animations, mixer]
    )

    // The return and stuff works all fine, but just displays a static model with no animations

    return (
        <Suspense fallback={null}>
            <primitive ref={mesh} object={gltf.scene} scale={0.5} />
        </Suspense>
    )
}

I have tried googling everything and I can't find any documentation for this so any help would be appreciated. Thank you.