How to use the reakit.unstable_useId function in reakit

export function PlaygroundPreview({
  code,
  modules,
  update,
  componentName,
  ...htmlProps
}: PlaygroundPreviewOptions & PlaygroundPreviewHTMLProps) {
  const options = useOptions(
    "PlaygroundPreview",
    { code, modules, componentName },
    htmlProps
  );

  const ref = React.useRef(null);
  const { id: prefix } = useId({ baseId: "preview" });
  const [error, setError] = React.useState(null);

  const handleError = React.useCallback((e: Error) => {
    setError(e);
    console.error(e); // eslint-disable-line no-console
  }, []);

  const [rendered, setRendered] = React.useState(() => {
    try {
      const Example = compileComponent(
        options.code,
        options.modules,
        options.componentName
      );
      return ;
    } catch (e) {

export default function DocsInnerNavigation({
  sourceUrl,
  readmeUrl,
  title,
  tableOfContentsAst
}: Props) {
  const { id } = useId();
  const className = useDocsInnerNavigationCSS();

  return (
    
      
        <div>
          <button href="{sourceUrl}">
            
            <spacer width="{8}"> View on GitHub
          </spacer></button>
          </div>

export default function DocsNavigation() {
  const data: Data = useStaticQuery(query);
  const { id: baseId } = useId({ baseId: "docs-navigation" });
  const className = useDocsNavigationCSS();

  const getId = (section: string) => `${baseId}-${kebabCase(section)}`;
  const findMeta = (path: string) =>
    data.allMarkdownRemark.nodes.find(node => node.frontmatter.path === path)!;
  const getTitle = (path: string) => findMeta(path).title;
  const getIsExperimental = (path: string) =>
    Boolean(findMeta(path).frontmatter.experimental);

  return (
    <div>
      {data.allDocsYaml.nodes.map(node =&gt; (
        <nav aria-labelledby="{getId(node.section)}">
          <h3 id="{getId(node.section)}">{node.section}</h3>
          <ul>
            {node.paths.map(path =&gt; (</ul></nav></div>