How do I execute a function when the animation ends with useTransition?

[botofune]

🤓 Question

Press the button to start the animation, and when the animation ends, unmount the component.

demo

The demo uses the onRest property to execute the function after the animation ends.

const [hold, setHold] = useState(false);
const transitions = useTransition(hold, null, {
    config: config.molasses,
    from: { opacity: 0, transform: "translateY(100vh)" },
    enter: { opacity: 1, transform: "translateY(0)" },
    leave: { opacity: 0, transform: "translateY(100vh)" },
    onRest: () => {
      if (hold) setToggle(false);
    }
  });

setHold (true) is executed in onMouseDown and setHold (false) is executed in onMouseUp.
When setToggle (false) is executed, unmount the component.

However, repeated clicking without holding down the button can unmount the component before the animation ends.

Is there a way to unmount only when the animation has finished?
Or is there anything missing from the demo code?

[aleclarson]

Using the latest v9 canary, I've got it working:
https://codesandbox.io/s/react-spring-issue-898-5kljn

All it took was updating the useTransition calls to the new API. More info here.

PS: You can become my patron to support my work.

[botofune]

Thank you very much.
Sorry for taking your time for a trivial question.