<div id="root" class="panel center"></div>
.app {
  padding: 10px;
}

.box {
 margin: 1rem auto;
}
console.clear();

const { useRef, useState, useLayoutEffect } = React;

function App() {    
  
  const app = useRef();
  const [active, setActive] = useState(true);
  const [ctx] = useState(gsap.context(() => {}, app));
  useLayoutEffect(() => {
    ctx.add("remove", () => {
      gsap.to(ctx.selector(".box"), {
        opacity: 0,
        onComplete: () => setActive(false)
      });
    });
    return () => ctx.revert();
  }, []);
  
  return (
    <div className="app" ref={app}>
      {/* <button className="button" onClick={() => active && remove()}> */}
      <button className="button" onClick={() => active && ctx.remove()}>
        {active ? "Remove Box" : "Done"}
      </button>
      { active ? <div className="box">Box</div> : null }
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
View Compiled

External CSS

  1. https://codepen.io/GreenSock/pen/gOWxmWG.css

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js