Rows are not updating properly after navigation with the pagination buttons

[ebitogu]

I am trying to display editable contents on the Table

Here is a sample of one of the entries in my rows data

{
    name: 'Caption',
    selector: row => row.caption,
    sortable: true,
    reorder: true,
    cell: (row, index) => { //This index seems not to be updating when I use the pageNavigation buttons at the bottom
          return <CustomEditBox
                    initialValue={row.text}
                    data={row}
                    onChange={(updatedRow) => {
                    console.log(`Updating Index ${index}`) //This index seems not to be updating when I use the pageNavigation buttons at the bottom
                   }}
        />
    }
}

But something weird is going on. When I use the navigation buttons at the bottom of the Table to navigate between the pages of the table the index doesn't seem to change. The table keeps reusing previous indices.

So for example if I have 5 rows per page and I navigate to the second page and make a change to the CustomEditBox at row 10 the change is applied to only row 5 which was in page 1 and not row 10 which is currently visible to me. This is wrong!!!

Changes on 10th row should strictly be for 10th row and not 5th row.

Any ideas on how to resolve this would be greatly appreciated.

Thanks!