Play, pause and play animation | useGLTF

Questions
1

Hi everyone!
I’m trying to do a simple animation with something like:

 const { nodes, materials, animations } = useGLTF('/models/transformed.glb')
 const { actions,names } = useAnimations(animations, group)

useEffect(()=>{
actions[names[0]].reset().fadeIn(0.5).play();
return () => actions[names[0]].fadeOut(0.5).stop();
}[actions,names])

I’ve only one animation in my model. all I want to do is when I click model first time it should start the animation and on second click it should pause on third it should again start and so on…
As above mentioned, I could start the animation but it’s on loop I couldn’t stop it.

2

the code up there just starts, it doesnt stop.

useEffect(() => {
  actions.foo.play()
}, [])

return <mesh onClick={() => (actions.foo.paused = !actions.foo.paused)} />