How to prevent all instances from playing animation

Hello!

I would like to only have one instance of a button to play the pressing animation, not all of the buttons at once. How could I go about doing that?

Here is my code:

export function CalculatorButton({id, char, position, rotation, scale, currentButtonPressed, setCurrentButtonPressed}) {
  const group = useRef()
  const instances = useContext(context)
  const { materials, animations } = useGLTF('./3D_Assets/calculator_button-transformed.glb')
  const { actions } = useAnimations(animations, group)

  const symbolMaterial = new MeshStandardMaterial({
    color: new THREE.Color( 0x003986 ),
    side: THREE.DoubleSide,
  })

  const symbolPosition = new THREE.Vector3(0, .697, 0)

  useEffect(() => {
    if (currentButtonPressed !== '') {
      actions['Button_Press'].play()
    }
    return () => {}
  }, [currentButtonPressed]);

  return (
    <group 
      ref={group} 
      dispose={null} 
      position={position} 
      rotation={rotation} 
      scale={scale} 
      onPointerDown={(char) => setCurrentButtonPressed(char)}
    >
      <Html
        transform
        position={symbolPosition}
        rotation={char === "←" ? [-Math.PI/2, 0, -Math.PI/2] : [-Math.PI/2, 0, 0]}
        scale={char === "←" ? [1, .75, 1] : [1, 1, 1]}
        material={symbolMaterial}
        occlude
        // color="#003986"
      >
        <p>{char}</p>
      </Html>
      <group name="Scene">
        <group name="Button">
          <instances.ButtonRim />
          <instances.ButtonBody />
        </group>
      </group>
    </group>
  )
}

useGLTF.preload('./3D_Assets/calculator_button-transformed.glb')

Please let me know if there is a way to go about this. Thanks!

Based on a tutorial on pmndrs I created a state called ‘active’ in the button component, and also added stop propagation:

  ...
  useEffect(() => {
    actions['Button_Press'].reset()
    actions['Button_Press'].setLoop(THREE.LoopOnce);
    actions['Button_Press'].play()

    return () => {}
  }, [active]);

  return (
    <group 
      ref={group} 
      dispose={null} 
      position={position} 
      rotation={rotation} 
      scale={scale} 
      onClick={(event) => (event.stopPropagation(), setActive(!active))}
    >
    ...