How to use the reakit-utils/useIsomorphicEffect.useIsomorphicEffect function in reakit-utils

const [visible, setVisible] = React.useState(sealedVisible);
  const [animating, setAnimating] = React.useState(false);
  const [isMounted, setIsMounted] = React.useState(initialIsMounted);
  const lastVisible = useLastValue(visible);

  if (
    animated &&
    !animating &&
    lastVisible.current != null &&
    lastVisible.current !== visible
  ) {
    // Sets animating to true when when visible changes
    setAnimating(true);
  }

  useIsomorphicEffect(() => {
    if (typeof animated !== "number") return undefined;
    // Stops animation after an interval defined by animated
    const timeoutId = setTimeout(() => setAnimating(false), animated);
    return () => clearTimeout(timeoutId);
  }, [animated]);

  const show = React.useCallback(() => {
    warning(
      !isMounted,
      "[reakit/Hidden]",
      "You're trying to show a hidden element that hasn't been mounted yet.",
      "You shouldn't conditionally render a `Hidden` component (or any of its derivatives) as this will make some features not work.",
      "If this is intentional, you can omit this warning by passing `unstable_isMounted: true` to `useHiddenState` or just ignore it.",
      "See https://reakit.io/docs/hidden/#conditionally-rendering"
    );
    setVisible(true);

if (popper.current) {
      popper.current.scheduleUpdate();
      return true;
    }
    return false;
  }, []);

  const update = React.useCallback(() => {
    if (popper.current) {
      popper.current.update();
      return true;
    }
    return false;
  }, []);

  useIsomorphicEffect(() => {
    if (referenceRef.current && popoverRef.current) {
      popper.current = new Popper(referenceRef.current, popoverRef.current, {
        placement: originalPlacement,
        eventsEnabled: dialog.visible,
        positionFixed: fixed,
        modifiers: {
          applyStyle: { enabled: false },
          flip: { enabled: flip, padding: 16 },
          inner: { enabled: inner },
          shift: { enabled: shift },
          offset: { enabled: shift, offset: `0, ${gutter}` },
          preventOverflow: { enabled: preventOverflow, boundariesElement },
          arrow: arrowRef.current
            ? { enabled: true, element: arrowRef.current }
            : undefined,
          updateStateModifier: {

export default function useScrolled(offset = 0) {
  const [scrolled, setScrolled] = React.useState(false);

  useIsomorphicEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > offset);
    };
    handleScroll();
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [offset]);

  return scrolled;
}

export function useDisclosuresRef(options: DialogOptions) {
  const disclosuresRef = React.useRef([]);
  const lastActiveElement = React.useRef<element>(null);

  useIsomorphicEffect(() =&gt; {
    if (options.visible) return undefined;
    const onFocus = () =&gt; {
      lastActiveElement.current = document.activeElement;
    };
    document.addEventListener("focus", onFocus, true);
    return () =&gt; document.removeEventListener("focus", onFocus, true);
  }, [options.visible]);

  React.useEffect(() =&gt; {
    if (!options.visible) return;

    const selector = `[aria-controls~="${options.baseId}"]`;
    const disclosures = Array.from(
      document.querySelectorAll(selector)
    );
</element>

function useLastValue(value: T) {
  const lastValue = React.useRef(null);
  useIsomorphicEffect(() => {
    lastValue.current = value;
  }, [value]);
  return lastValue;
}

function useViewportWidthGreaterThan(width: number) {
  const [greater, setGreater] = React.useState(false);

  useIsomorphicEffect(() => {
    const handleResize = () => {
      if (window.innerWidth > width) {
        setGreater(true);
      } else {
        setGreater(false);
      }
    };
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [width]);

  return greater;
}