Three.Js How to play the action clips imported from my model as individual clips

Questions
1

Dear reader,

Question:
How do I play the action clips imported from my model as individual clips?

Problem:
I have a glb model that I imported along with 5 of its actions. In the image below, I have an animation controller that lets me play the selected action of my model. “hamthumbacrossmod” is only supposed to bend the thumb but it seems like the model is chaining the previous animations together and the result is as shown below.

image
image1204×867 73 KB

I have also found that by reordering the actions in blender I can get the animation to play properly however some animations like “hamthumbacrossmod”, will have to be duplicated if I want to chain it with my future actions and I would like to avoid doing that.

Alternative solution:
I realise I can import the actions as separate animations but I would like to avoid doing this as it is harder to code and makes my project very disorderly.

The following code is my react-three-fiber model as a jsx component:

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.2.16 public/models/man.glb 
*/

import React, { useEffect, useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import { useCharacterAnimations } from "../contexts/CharacterAnimations";
import * as THREE from "three";

const Man = (props) => {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF("./models/man.glb");
  const { setAnimations, animationIndex } = useCharacterAnimations();
  const { actions, names } = useAnimations(animations, group);
  console.log(names);

  useEffect(() => {
    setAnimations(names);
  }, [names]);

  useEffect(() => {
    const currentAction = actions[names[animationIndex]];
    currentAction.stop().fadeIn(0.5).play();
    currentAction.setLoop(THREE.LoopOnce, 1);
    currentAction.clampWhenFinished = true;

    return () => {
      currentAction.fadeOut(0.5);
    };
  }, [animationIndex]);

  return (
    <group ref={group} position={[0, -110, 0]} {...props} dispose={null}>
      <group name="Scene">
        <group name="Armature001" rotation={[1.829, 0, 0]}>
          <primitive object={nodes.root} />
          <skinnedMesh
            name="rp_manuel_animated_001_dancing_geo"
            geometry={nodes.rp_manuel_animated_001_dancing_geo.geometry}
            material={materials["rp_manuel_animated_001_mat.005"]}
            skeleton={nodes.rp_manuel_animated_001_dancing_geo.skeleton}
            castShadow
          />
        </group>
      </group>
    </group>
  );
};
export default Man;

useGLTF.preload("./models/man.glb");