Avoid rernedering the whole table on useRowSelect

[cubecleveland]

Hello, im using the useRowSelect hook. i have the following code that implement the row selection:

<Table {...getTableProps()}>

{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<Th
selectable
{...column.getHeaderProps(
column.getSortByToggleProps({ title: undefined })
)}
style={column.style}
>

{column.render("Header")}
{/* Add a sort direction indicator /}
<span
css={cssmargin-left: auto; margin-right: 40px;}
>
{column.isSorted ? (
column.isSortedDesc ? (

) : (

)
) : (
""
)}

))}

))}

<tbody {...getTableBodyProps()}>
{page.length > 0 /* Add is Fetchin gf using keepData */ &&
page.map((row, i) => {
prepareRow(row);
return (
<Tr
selectable={selectable}
{...row.getRowProps()}
onClick={() => {
let i = row.isSelected;
toggleAllRowsSelected(false);
row.toggleRowSelected(!i);
}}
>
{row.cells.map((cell) => {
return (
<Td {...cell.getCellProps()}>
{cell.render("Cell", { live })}

);
})}

);
})}

i have 2 issues. is the loigc im using correct,. since i only want to choose 1 row at a time? or is there another way to do that.

If the ogic is correct it creates an issue wherre the entire table is being redrawn. My TD's include images.. and the make s the entire tbale redraw on image fetching.....

Another questions thta comes to mind id: is there any way to not rernder the entire row if its 'selected' ?

Thanks!