How to use the reakit/Menu.useMenuState function in reakit

({
    Icon,
    primaryActionLabel,
    onPrimaryClick,
    disablePrimary = false,
    small = false,
    block = false,
    disabled = false,
    secondary = false,
    red = false,
    danger = false,
    children,
    className,
  }) => {
    const menu = useMenuState();
    const buttonProps = { small, block, disabled, secondary, red, danger };

    return (
      
        {/*
        // @ts-ignore */}
         onPrimaryClick(e, menu)}
          className={className}
          {...buttonProps}
          disabled={disablePrimary || disabled}
        >
          {Icon && }
          {primaryActionLabel}

export const Menu: React.FC = ({
  label,
  as = MenuButton,
  disabled = false,
  onOpen = () => {},
  onClose = () => {},
  onToggle = () => {},
  children,
  ...props
}) => {
  const menu = useMenuState();
  useEffect(() => {
    if (menu.visible) {
      onOpen();
    } else {
      onClose();
    }
  }, [onOpen, onClose, menu.visible]);

  return (
    
      
        {label}
      
      
        {children && (children as React.ReactElement[]).length
          ? /* eslint-disable react/no-array-index-key */

export const UserMenu: FunctionComponent = () => {
  const {
    actions: {
      modalOpened,
      signOutClicked,
      files: { gotUploadedFiles },
    },
    state: { user },
  } = useOvermind();
  const menu = useMenuState({
    placement: 'bottom-end',
  });

  return (

export const SortOptions: React.FC<{ hideOrder: boolean }> = ({
  hideOrder,
}) => {
  const {
    state: {
      dashboard: {
        orderBy: { field, order },
      },
    },
    actions: {
      dashboard: { orderByChanged },
    },
  } = useOvermind();
  const menu = useMenuState();

  const toggleSort = e => {
    e.preventDefault();

    orderByChanged({
      orderBy: {
        order: order === 'asc' ? 'desc' : 'asc',
        field,
      },
    });
  };

  const setField = (fieldToSet: string) => {
    orderByChanged({
      orderBy: {
        order,

({ disclosure, tooltip, items, placement, ariaLabel, ...props }, ref) => {
    const menu = useMenuState({ placement })
    const tooltipState = useTooltipState({ placement })

    const subRef = React.useRef(null)
    const mainRef = React.useRef(null)

    const [height, setHeight] = React.useState(0)
    const [submenuState, setSubmenuState] = React.useState({
      show: false,
      list: null,
      index: null,
      items: null,
      title: null,
    })
    const getHeight = element => {
      const bounds = element.getBoundingClientRect()
      return bounds.height

export const Menu = (props) => {
	const {
		'aria-label': ariaLabel,
		children,
		disclosure,
		placement,
		onDismiss,
		gutter,
		menuStyle,
	} = props;

	const menu = RK.useMenuState({
		placement: placement,
		gutter: gutter,
		unstable_preventOverflow: false,
	});

	const handleDismiss = () => {
		menu.hide();
		onDismiss();
	};

	return (

const FilterOptionsComponent: React.FC = ({
  possibleTemplates,
  hideFilters,
}: IFilterOptionsProps) => {
  const menu = useMenuState({
    placement: 'bottom-end',
  });

  const {
    state: {
      dashboard: { isTemplateSelected, filters },
    },
    actions: {
      dashboard: {
        blacklistedTemplateAdded,
        blacklistedTemplateRemoved,
        blacklistedTemplatesCleared,
        blacklistedTemplatesChanged,
      },
    },
  } = useOvermind();