Table virtuoso hover on row

Question

I'm using react-virtuoso with material ui, I'm trying to hover on specific row and add action when hover.

example of the code:

https://codesandbox.io/s/hqt3js

I tried to add <TableRow> in rowContent function render

function rowContent(_index: number, row: Data) {
  return (
    <React.Fragment>
      <TableRow
        hover={true}
        onMouseEnter={() => {
          console.log('hover');
        }}
      >
        {columns.map((column) => (
          <TableCell key={column.dataKey} align={column.numeric || false ? 'right' : 'left'}>
            {row[column.dataKey]}
          </TableCell>
        ))}
      </TableRow>
    </React.Fragment>
  );
}

I'm getting the error:

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <tr>.