function useAnimatedVisibility(initial, time) {
  const [showContents, setShowContents] = useState(initial);

  useEffect(() => {
    if (initial) {
      setShowContents(true);
    } else {
      const id = setTimeout(() => setShowContents(false), time);
      return () => clearTimeout(id);
    }
  }, [initial, setShowContents, time]);

  return showContents;
}
This hook can be used to toggle visibility of elements when the container has
animated visibility. The issue occurrs during the "close" phase of the animation
where the elements are meant to stay mounted just till the animation finishes.

@param {boolean} initial Initial state
@param {number} time Time in milliseconds of the close animation
@returns {boolean} State variable that stays toggled ON till the animation completes