How to remove an object from a scene completely?

[c-t-y]

Hey all,
I've just started using react-three-fiber and really love how simple it makes Three.js.

I'm making a simple app which mounts an animated object upon a keystroke. I would like that object to then disappear/unmount from the scene after the animations are complete. What is the best way to approach this with react-three-fiber?

One approach that I tried was to automate the scale from 1 to 0 using react-spring but it seems a little bit hack-y. I also am not sure how to approach having an object fade out after the animation is complete.

Here is a codesandbox: https://codesandbox.io/s/angry-tharp-rg382?fontsize=14&hidenavigation=1&theme=dark

If you press the 'a' and 's' keys it will play both animations. I am also trying to figure out how to restart the animation so that if I spam the "a" key for instance, it will restart the entire animation.

Any help would be appreciated!

[drcmda]

the box seems to display a white page, nothing else. otherwise i dont quite get it, in react things unmount if you stop rendering them:

{condition && <element />}