react-data-table-component - Columns which are sorted don't remain those rows if expanded with expandableRows

Question

I'm having an issue in react-data-table-component where, after clicking on the column header to sort the rows, it fails to remain the same item getting clicked after sorting. See below. Once clicked, the row item immediately changes to another item. But I need it to remain the same item and not change to a completely new item:

Do you see how, after I sort the rows by clicking on the column header it correctly sorts the rows, but afterward, I click on the first row and it totally changes to another row item?

My code:

             <DataTable
                 title={ `Items` }
                 columns={ columns }
                 data={ filteredItems }
                 pagination
                 paginationResetDefaultPage={ resetPaginationToggle }
                 subHeader
                 onRowClicked={ handleRowClicked }
                 selectableRows
                 selectableRowsComponent={Checkbox} // Pass the function only
                 selectableRowsComponentProps={selectProps}
                 onSelectedRowsChange={ handleSelectedRows }
                 responsive
                 expandableRows
                 expandOnRowClicked
                 expandableRowsHideExpander
                 expandableRowsComponent={ <UpdateItemComponent data={ mainData } /> }
                 persistTableHead
             />

Perhaps it's something to do with resetPaginationToggle? I'm not sure.

How do I solve it so the row remains the same after sorting and then clicking on a row?