How to use the reakit-utils.useId function in reakit-utils

export const Demoboard = (props: DemoboardProps = defaultProps) => {
  // Each demoboard managed by a single worker needs to have a unique id.
  // Given that a worker may be shared over multiple nested demoboards, we'll
  // want to scope our generated ids by demoboard id.
  const demoboard = (typeof window !== 'undefined' &&
    (window as any).demoboard) || {
    id: 'demoboard',
  }
  const defaultId = useId(demoboard.id + '-')

  const { id = defaultId, width, height, style, className, ...rest } = props
  const project = useDemoboardProject(rest)
  const build = useDemoboardBuild(id, project.buildConfig)
  const instance = useDemoboardInstance({
    build,
    history: project.state.view.history,
    pause: false,
    onChangeHistory: value => {
      project.dispatch({
        type: 'history.set',
        history: value,
      })
    },
  })

export function OpenTabList({
  onSelect,
  onClose,
  selected,
  tabs,
}: OpenTabListProps) {
  const baseId = useId('open-tab-')
  const rover = useRoverState({
    loop: true,
    currentId: selected,
  })
  const tab = {
    ...rover,
    unstable_baseId: baseId,
    selectedId: selected,
    select: onSelect,
  }

  return (
    
      {tabs.map(pathname => (
        
          {pathname.slice(1)}