How to use the reakit.useDialogState function in reakit

function Example() {
    const dialog = useDialogState();
    return (
      <>
        Open dialog
        <dialog aria-label="Welcome">
          {dialogProps =&gt;
            dialog.visible &amp;&amp; <div>Welcome to Reakit!</div>
          }
        </dialog>
      
    );
  }
  return ;

function Board() {
  const rover = useRoverState({ orientation: "horizontal" });
  const dialog = useDialogState();
  const { columns, addColumn, removeColumn, editColumn } = useBoardContext();

  return (
    <div style="{{">
      {columns.map(column =&gt; (
         editColumn(column.id, content)}
          onRemove={() =&gt; removeColumn(column.id)}
        /&gt;
      ))}
      
        Create column</div>

(props, ref: React.RefObject) => {
        const dialog = useDialogState();
        const [value, setValue] = React.useState("");
        return (
          <>
            
              Open dialog...
            
            <dialog aria-label="Dialog with input">
              <input value="{value}" type="text"> setValue(event.target.value)}
              /&gt;
            </dialog>
          
        );
      }

export default function Header({ transparent }: HeaderProps) {
  const ref = React.useRef(null);
  const isLarge = useViewportWidthGreaterThan(768);
  const background = usePalette("background");
  const foreground = usePalette("foreground");
  const primary = usePalette("primary");
  const boxShadowColor = useFade(foreground, 0.85);
  const dialog = useDialogState({ unstable_animated: true });
  const location = useLocation();

  React.useEffect(dialog.hide, [location.pathname]);

  return (
    <>

function Card({ content, onSubmit, onRemove, ...props }: CardProps) {
  const dialog = useDialogState();
  return (
    <>
      
        {htmlProps => (
          
            {content}
          
        )}