React controlled unmount

unmount.tsx

import React from 'react'
import { animated, useSpring } from 'react-spring'

const Example = () => {
  const [unmount, isUnmounting] = React.useUnmount()
  
  const { opacity } = useSpring({
    // Fade in "opacity" from 0
    from: { opacity: 0 },
    // Fade out "opacity" to 0 when ready to unmount
    opacity: isUnmounting ? 0 : 1,
    // Commit delayed unmount when fade out ends
    onRest: unmount,
  })
  
  return <animated.div style={{ opacity, width: 100, height: 100, background: 'red' }} />
}