How can I navigate the selected cell in react-table and react-window?

[snoooopy-ch]

Hello everyone,
Now I created new component with react-table and react-window.
And I show selected cell with active class name.
I want to navigate the selected cell with keyboard such as Tab, Enter, Arrow Up, Arrow Down etc.
How can I do it?

Here is my some code blow.

const defaultColumn = React.useMemo(
    () => ({
      width: 60,
      minWidth: 60,
      Cell: ResizableVirtualTableCell,
    }),
    [],
  )

  const scrollBarSize = React.useMemo(() => scrollbarWidth(), [])

  const { getTableProps, getTableBodyProps, headerGroups, rows, totalColumnsWidth, prepareRow } =
    useTable(
      {
        columns,
        data,
        defaultColumn,
      },
      useBlockLayout,
      useResizeColumns,
    )

  const getCellPosition: (i: number, j: number) => void = (i: number, j: number) => {
    setCurrentRow(i)
    setCurrentColumn(j)
  }

  const handleKeyDown: () => void = () => {
    console.log('handleKeyDown')
  }

  const RenderRow = React.useCallback(
    ({ index, style }: { index: number; style: any }) => {
      const row = rows[index]
      prepareRow(row)
      return (
        <div
          {...row.getRowProps({
            style,
          })}
          className='tr'
        >
          {row.cells.map((cell: Cell, colIndex: number) => (
            <div
              {...cell.getCellProps()}
              onClick={() => {
                getCellPosition(index, colIndex)
              }}
              onKeyDown={(e) => {
                handleKeyDown()
              }}
              className={
                'td' +
                ' cell-' +
                (columns[colIndex].type as string) +
                (currentRow === index && currentColumn === colIndex ? ` active` : ``)
              }
              key={colIndex}
            >
              {cell.render('Cell')}
            </div>
          ))}
        </div>
      )
    },
    [prepareRow, rows, currentRow, currentColumn],
  )

  return (
    <div className={tableStyle}>
      <div {...getTableProps()} className='table'>
        <div>
          {headerGroups.map((headerGroup: HeaderGroup, index: number) => (
            <div {...headerGroup.getHeaderGroupProps()} className='tr' key={index}>
              {headerGroup.headers.map((column: any, idx: number) => (
                <div
                  {...column.getHeaderProps({
                    style: { fontWeight: 'bold' },
                  })}
                  className='th'
                  key={idx}
                >
                  {column.render('Header')}
                  <div
                    {...column.getResizerProps()}
                    className={`resizer ${
                      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
                      column.isResizing ? 'isResizing' : ''
                    }`}
                  />
                </div>
              ))}
            </div>
          ))}
        </div>

        <div {...getTableBodyProps()}>
          <FixedSizeList
            height={heightOfTable ?? 400}
            itemCount={rows.length}
            itemSize={heightOfCell ?? 22}
            width={totalColumnsWidth + scrollBarSize}
          >
            {RenderRow}
          </FixedSizeList>
        </div>
      </div>
    </div>

In this code, the function handleKeyDown is not working.
I am appreciate if anyone helps me.
Thank you.