How to use the reakit.useRoverState function in reakit

const List: FunctionComponent = ({ title, gridMode = false }) => {
  const series = useMemo(() => shuffle(seriesData), [])
  const rover = useRoverState({ loop: true, orientation: 'horizontal' })
  const wrapperRef = useRef(null)

  function handleThumbFocus(index: number) {
    if (isMobile) return;

    // Colocar a lista no centro vertical da tela (movendo o scroll da página)
    const navbarHeight = 72 / 2
    const halfHeightOfWrapper = wrapperRef.current.offsetHeight / 2
    const halfHeightOfWindow = window.innerHeight / 2
    const scrollTop = wrapperRef.current.offsetTop - navbarHeight - halfHeightOfWindow + halfHeightOfWrapper
    window.scrollTo(0, scrollTop)

    // Colocar o elemento em foco alinhado a esquerda da tela
    const originalWidth = (355 + 20)
    wrapperRef.current.style.left = `-${originalWidth * index}px`
  }

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;
      ))}
      </div>

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 (