How to use the reakit/Dialog.useDialogState function in reakit

export const Modal: React.FC = ({
  label,
  button = Button,
  backdrop = Backdrop,
  container = Container,
  isOpen,
  onClose = () => undefined,
  children,
  ...props
}) => {
  const dialog = useDialogState();
  const onHide = () => {
    dialog.hide();
    onClose();
  };

  return (
    <>
      {label && (
        
          {label}
        
      )}

export function Navbar({ children }) {
  const dialog = useDialogState({ unstable_animated: true, visible: false })
  const childrenArray = React.Children.toArray(children)
  const secondary = childrenArray.find(child => child.type === NavbarSecondary)
  return (
    <nav>
      {secondary.props.children}
      
        {children}
        
        
      
    </nav>

export function Playground() {
  const [input, setInput] = React.useState(defaultSvg)
  const [output, setOutput] = React.useState('')
  const [loading, setLoading] = React.useState(false)
  const [state, setState] = useQuery(getInitialState)
  const dialog = useDialogState({ visible: false })

  const transformIdRef = React.useRef(0)

  React.useEffect(() => {
    async function transform() {
      if (input.trim() === '') {
        setOutput('')
        return
      }

      setLoading(true)

      if (window.ga) {
        window.ga('send', {
          hitType: 'event',
          eventCategory: 'Playground',