Animate and hide element on click

HTML

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<div id="container"></div>

React

const { useRef } = React;

function DisintegrateEffect() {
  const divRef = useRef(null);

  const handleDelete = () => {
    if (!divRef.current) return;

    gsap.to(divRef.current, {
      duration: 0.8,
      opacity: 0,
      scale: 1.2,
      filter: 'blur(15px)',
      y: -10,
      ease: 'power2.out',
      onComplete: () => {
        divRef.current.style.display = 'none';
      }
    });
  };

  return (
    <div
      ref={divRef}
      onClick={handleDelete}
      style={{
        padding: '16px',
        background: 'red',
        color: 'white',
        fontWeight: 'bold',
        cursor: 'pointer',
        display: 'inline-block'
      }}
    >
      Apagar
    </div>
  );
}

ReactDOM.render(<DisintegrateEffect />, document.getElementById('container'));