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

export function useHiddenState(
  initialState: SealedInitialState = {}
): HiddenStateReturn {
  const {
    unstable_animated: animated = false,
    visible: sealedVisible = false,
    unstable_isMounted: initialIsMounted = false,
    ...sealed
  } = useSealedState(initialState);

  const id = unstable_useIdState(sealed);

  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);

export function unstable_useIdState(
  initialState: SealedInitialState = {}
): unstable_IdStateReturn {
  const { baseId: initialBaseId } = useSealedState(initialState);
  const generateId = React.useContext(unstable_IdContext);
  const idCountRef = React.useRef(0);
  const [baseId, setBaseId] = React.useState(
    () => initialBaseId || generateId()
  );

  return {
    baseId,
    unstable_setBaseId: setBaseId,
    unstable_idCountRef: idCountRef
  };
}

export function useTooltipState(
  initialState: SealedInitialState = {}
): TooltipStateReturn {
  const {
    placement = "top",
    unstable_boundariesElement = "window",
    ...sealed
  } = useSealedState(initialState);
  return usePopoverState({ ...sealed, placement, unstable_boundariesElement });
}

export function useCheckboxState(
  initialState: SealedInitialState = {}
): CheckboxStateReturn {
  const { state: initialValue = false } = useSealedState(initialState);
  const [state, setState] = React.useState(initialValue);
  return {
    state,
    setState
  };
}

export function useTabState(
  initialState: SealedInitialState = {}
): TabStateReturn {
  const {
    selectedId: sealedSelectedId = null,
    loop = true,
    manual = false,
    ...sealed
  } = useSealedState(initialState);

  const [selectedId, select] = React.useState(sealedSelectedId);
  const rover = useRoverState({
    loop,
    currentId: selectedId,
    ...sealed
  });

  return {
    ...rover,
    selectedId,
    manual,
    select
  };
}

export function useToolbarState(
  initialState: SealedInitialState = {}
): ToolbarStateReturn {
  const { orientation = "horizontal", ...sealed } = useSealedState(
    initialState
  );
  return useRoverState({ orientation, ...sealed });
}

export function useMenuBarState(
  initialState: SealedInitialState = {}
): MenuBarStateReturn {
  const {
    orientation = "horizontal",
    unstable_values: initialValues = {},
    ...sealed
  } = useSealedState(initialState);

  const [values, setValues] = React.useState(initialValues);
  const rover = useRoverState({ ...sealed, orientation });

  return {
    ...rover,
    unstable_values: values,
    unstable_setValue: React.useCallback((name, value) => {
      setValues(vals => ({
        ...vals,
        [name]: typeof value === "function" ? value(vals) : value
      }));
    }, [])
  };
}

export function useMenuState(
  initialState: SealedInitialState = {}
): MenuStateReturn {
  const {
    orientation = "vertical",
    unstable_gutter: initialGutter = 0,
    ...sealed
  } = useSealedState(initialState);

  const parent = React.useContext(MenuContext);

  const placement =
    sealed.placement ||
    (parent && parent.orientation === "vertical"
      ? "right-start"
      : "bottom-start");

  const menuBar = useMenuBarState({ ...sealed, orientation });
  const popover = usePopoverState({
    ...sealed,
    placement,
    unstable_gutter: initialGutter
  });

export function usePopoverState(
  initialState: SealedInitialState = {}
): PopoverStateReturn {
  const {
    gutter = 12,
    placement: sealedPlacement = "bottom",
    unstable_flip: flip = true,
    unstable_shift: shift = true,
    unstable_inner: inner = false,
    unstable_preventOverflow: preventOverflow = true,
    unstable_boundariesElement: boundariesElement = "scrollParent",
    unstable_fixed: fixed = false,
    ...sealed
  } = useSealedState(initialState);

  const popper = React.useRef(null);
  const referenceRef = React.useRef(null);
  const popoverRef = React.useRef(null);
  const arrowRef = React.useRef(null);

  const [originalPlacement, place] = React.useState(sealedPlacement);
  const [placement, setPlacement] = React.useState(sealedPlacement);
  const [popoverStyles, setPopoverStyles] = React.useState(
    {}
  );
  const [arrowStyles, setArrowStyles] = React.useState({});

  const dialog = useDialogState(sealed);

  const scheduleUpdate = React.useCallback(() => {

export function useRadioState(
  initialState: SealedInitialState = {}
): RadioStateReturn {
  const { state: initialCurrentValue, loop = true, ...sealed } = useSealedState(
    initialState
  );

  const [state, setState] = React.useState(initialCurrentValue);

  const rover = useRoverState({ ...sealed, loop });

  return {
    ...rover,
    state,
    setState
  };
}