How to add a secondary animation on click while maintaining a default animation

I have two animations: robot_idle.fbx and robot_shoot.fbx. I’m displaying the robot_idle animation by default when the page loads. However, I need to display the robot_shoot animation whenever the user clicks on the page, and then return to the idle animation. Could I please have some assistance with this? I’m relatively new to Three.js.

"use client";

import { useRef, useEffect, useState } from "react";
import * as THREE from "three";
import { Canvas, useLoader, useFrame } from "@react-three/fiber";
import { useAnimations } from "@react-three/drei";
import { FBXLoader } from "three/examples/jsm/Addons.js";

const Model = () => {
  const [error, setError] = useState<string | null>(null);
  const [loaded, setLoaded] = useState(false);

  const fbx = useLoader(FBXLoader, "/models/robot.fbx", undefined, (error) => {
    setError(`Failed to load FBX: ${error}`);
  });

  const idleAnimation = useLoader(FBXLoader, "/models/animations/robot_idle.fbx", undefined, (error) => {
    setError(`Failed to load idle animation: ${error}`);
  });

  const { mixer } = useAnimations(idleAnimation.animations, fbx);
  const mouseX = useRef(0);

  const [
    baseTexture1,
    normalTexture1,
    roughnessTexture1,
    metallicTexture1,
    emissiveTexture1,
    aoTexture1,
    baseTexture2,
    normalTexture2,
    roughnessTexture2,
    metallicTexture2,
    emissiveTexture2,
    aoTexture2,
  ] = useLoader(THREE.TextureLoader, [
    "/models/textures/torso_base_color.png",
    "/models/textures/torso_normal.png",
    "/models/textures/torso_roughness.png",
    "/models/textures/torso_metallic.png",
    "/models/textures/torso_emissive.png",
    "/models/textures/torso_ao.png",
    "/models/textures/limbs_base_color.png",
    "/models/textures/limbs_normal.png",
    "/models/textures/limbs_roughness.png",
    "/models/textures/limbs_metallic.png",
    "/models/textures/limbs_emissive.png",
    "/models/textures/limbs_ao.png",
  ]);

  const groupRef = useRef<THREE.Group>(null);

  useEffect(() => {
    if (fbx && idleAnimation) {
      const torsoMaterial = new THREE.MeshStandardMaterial({
        map: baseTexture1,
        normalMap: normalTexture1,
        roughnessMap: roughnessTexture1,
        metalnessMap: metallicTexture1,
        emissiveMap: emissiveTexture1,
        aoMap: aoTexture1,
        emissive: new THREE.Color(0xffffff),
        emissiveIntensity: 1,
        roughness: 0.5,
        metalness: 0.8,
      });

      const limbsMaterial = new THREE.MeshStandardMaterial({
        map: baseTexture2,
        normalMap: normalTexture2,
        roughnessMap: roughnessTexture2,
        metalnessMap: metallicTexture2,
        emissiveMap: emissiveTexture2,
        aoMap: aoTexture2,
        emissive: new THREE.Color(0xffffff),
        emissiveIntensity: 1,
        roughness: 0.5,
        metalness: 0.85,
      });

      fbx.traverse((child) => {
        if (child instanceof THREE.Mesh) {
          if (child.name.toLowerCase().includes("torso")) {
            child.material = torsoMaterial;
          } else {
            child.material = limbsMaterial;
          }

          child.castShadow = true;
          child.receiveShadow = true;
        }
      });

      const idleAction = mixer.clipAction(idleAnimation.animations[0]);
      idleAction.play();

      setLoaded(true);
    }

    const handleMouseMove = (event: MouseEvent) => {
      mouseX.current = (event.clientX / window.innerWidth) * 2 - 1;
    };

    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, [
    fbx,
    idleAnimation,
    mixer,
    baseTexture1,
    normalTexture1,
    roughnessTexture1,
    metallicTexture1,
    emissiveTexture1,
    aoTexture1,
    baseTexture2,
    normalTexture2,
    roughnessTexture2,
    metallicTexture2,
    emissiveTexture2,
    aoTexture2,
  ]);

  useFrame(() => {
    if (groupRef.current) {
      groupRef.current.rotation.y = THREE.MathUtils.lerp(
        groupRef.current.rotation.y,
        mouseX.current * 0.5,
        0.1,
      );
    }
  });

  if (error) {
    console.error(error);
    return null;
  }

  if (!loaded) {
    return null;
  }

  return (
    <group ref={groupRef}>
      <primitive
        object={fbx}
        scale={0.013}
        position={[0, -1.2, 0]}
        rotation={[0, Math.PI * 0.1, 0]}
      />
    </group>
  );
};

const Scene = () => {
  return (
    <>
      <ambientLight intensity={0.5} />
      <directionalLight
        color="#dec3c4"
        position={[5, 5, 5]}
        intensity={1}
        castShadow
      />
      <Model />
    </>
  );
};

const AnimatedRobot = () => {
  return (
    <div className="h-full w-full">
      <Canvas shadows camera={{ position: [0, 0, 3], fov: 60 }}>
        <Scene />
      </Canvas>
    </div>
  );
};

export default AnimatedRobot;

I tried implementing same useLoader for the shoot animation to display on click, but it didn’t really work as expected.