LazyCollapse.js

const LazyCollapse = ({ as: As = 'div', children, deps = [], ...props }) => {
  const [show, setShow] = useState(false);
  const [timestamp, setTimestamp] = useState(null);

  const handleEnter = () => {
    setShow(true);
  };

  const handleExited = () => {
    setShow(false);
  };

  useEffect(() => {
    if (props.in) {
      setTimestamp(Date.now());
    }
  }, [props.in].concat(deps));

  return (
    <Collapse {...props} unmountOnExit mountOnEnter onEnter={handleEnter} onExited={handleExited}>
      <As>
        {useMemo(() => {
          return show ? children() : null;
        }, [show, timestamp])}
      </As>
    </Collapse>
  );
};