React Table V6.11.5 : current page stored in state is not reflecting in the component correctly.

[prasanth94]

Describe the bug (required)
I am using a server side rendered React Table with filterable prop set as true. The current page, total number of pages and the default page size is stored in a component state. onFetchData prop is used to fetch the data from the server on pagination. The currentPage is set to 0 at first.

Explaining the issue with an example

The default page size is set to 5 and there are total 20 records. Hence total number of pages is 4.
If I navigate to "Page 2 of 4", and applied a filter on one of the columns, an api is called to get the first 5 records after filtering. Once the api is complete, current page and the total number of pages stored in state is set to 0 and 3(assume total number of records changes to 15 after filtering).
The expected result here is to render "Page 1 of 3" in UI but actual value rendering is "Page 2 of 3". Though the table is showing correct data of first 5 records.

Below mentioned is similar issue with same root cause:

Let's consider I have applied a filter condition on "status" column of the table with value "fail". On click of any row, the status of the record will change from "fail" to "success"(will be also updated in the server with an api call) and hence the record will be out of the filter condition and it will disappear from the table.
If I navigate to "Page 3 of 3" (with filter applied on the table), and click on each row one by one, each row will disappear after the click. On click of the final row in Page 3, there will be no records left in page 3, and the total number of pages will change to 2. At this point, the current Page and then total Page in the state is set to 0 and 2, i.e, the user will see first page of the table. Here, expected result is to display "Page 1 of 2", but actual result is "Page 3 of 2" (shown in below screenshot)

The below steps followed for fixing but did not resolve:

• Tried to use onPageChange prop to set the currentPage number.
• added a reference to the table and changed the table page state with the reference.
• Tried to re-render the component using componentDidUpdate so that it recognises the change in state.

What version of React-Table are you using?
6.11

What bug are you experiencing, or what feature are you proposing?
The current page is stored in state but is not reflected in the component correctly. When the number of pages in the view changes, the state is getting updated but the pagination shown in UI isn't.