How to use the reakit.useToolbarState function in reakit

const ControlsTable = (props) => {
	const { editorChangeObject } = props;
	const { menuItems = [], view } = editorChangeObject;
	const toolbar = useToolbarState({ loop: true });

	// eslint-disable-next-line react/prop-types
	const renderDisclosure = ({ ref, ...disclosureProps }) => {
		return (
			<button>
		);
	};

	return (</button>

const FormattingBar = (props) => {
	const {
		buttons,
		editorChangeObject,
		popoverContainerRef,
		showBlockTypes,
		isSmall,
		isTranslucent,
		isFullScreenWidth,
	} = props;
	const { menuItems, insertFunctions, view } = editorChangeObject;
	const { communityData } = usePageContext();
	const toolbar = useToolbarState({ loop: true });
	const {
		indicatedButtons,
		openedButton,
		setOpenedButton,
		controlsKey,
		controlsPosition,
		ControlsComponent,
	} = useControlsState(props);

	const menuItemByKey = (key) => {
		if (menuItems) {
			return menuItems.find((menuItem) => menuItem.title === key);
		}
		return null;
	};

function Column({
  columnId,
  title,
  onSubmit,
  onRemove,
  ...props
}: ColumnProps) {
  const rover = useRoverState({ orientation: "vertical" });
  const toolbar = useToolbarState();
  const { columns, addCard, removeCard, editCard } = useBoardContext();

  const { cards = [] } = columns.find(column => column.id === columnId) || {};

  return (
    
      {roverProps => (