How to use the reakit-utils/tabbable.getFirstTabbableIn function in reakit-utils

// If there're nested open dialogs, let them handle focus
    if (
      !shouldFocus ||
      !dialog ||
      nestedDialogs.find(child =>
        Boolean(child.current && !child.current.hidden)
      )
    ) {
      return;
    }

    if (initialFocusRef && initialFocusRef.current) {
      initialFocusRef.current.focus({ preventScroll: true });
    } else {
      const tabbable = getFirstTabbableIn(dialog, true);
      const isActive = () => dialog.contains(document.activeElement);
      if (tabbable) {
        ensureFocus(tabbable, { preventScroll: true, isActive });
      } else {
        ensureFocus(dialog, { preventScroll: true, isActive });
        warning(
          dialog.tabIndex === undefined || dialog.tabIndex < 0,
          "[reakit/Dialog]",
          "It's recommended to have at least one tabbable element inside dialog. The dialog element has been automatically focused.",
          "If this is the intended behavior, pass `tabIndex={0}` to the dialog element to disable this warning.",
          "See https://reakit.io/docs/dialog/#initial-focus"
        );
      }
    }
  }, [dialogRef, nestedDialogs, initialFocusRef, shouldFocus]);
}

const handleFocus = (event: FocusEvent) => {
      const dialog = dialogRef.current;
      if (!dialog || hasNestedOpenModals(nestedDialogs)) return;

      event.preventDefault();

      const isAfter = event.target === after;

      const tabbable = isAfter
        ? getFirstTabbableIn(dialog)
        : getLastTabbableIn(dialog);

      if (tabbable) {
        tabbable.focus();
      } else {
        // fallback to dialog
        dialog.focus();
      }
    };