'Rows per page label' is not showing correct value when paginationPerPage is dynamically set

[nvkex]

Issue Check list

• [x] Agree to the Code of Conduct
• [x] Read the README
• [x] You are using React 16.8.0+
• [x] You installed styled-components
• [x] Include relevant code or preferably a code sandbox

Describe the bug

When I tried to update the value dynamically to paginationPerPage attribute, it fails to update in the footer where 'Rows per page' label is displayed along with the current indexes of the rows.

To Reproduce

Steps to reproduce the behavior:

• Go to https://codesandbox.io/embed/react-data-table-forked-hhf4cm . You can see Rows per page : 5 with 1-5 of 146. in the table footer.
• I have created a button which changes the paginationPerPage value to 10. (Originally it is set to 5)
• Click on the Change Pagination Per Page button.
• The count of rows inside the table changes, which is correct behavior. But the footer label displayed remains same. It shows older values.

Expected behavior

The footer labels should display the correct paginationPerPage value along with the count of rows displayed inside the table.

Code Sandbox, Screenshots, or Relevant Code

https://codesandbox.io/embed/react-data-table-forked-hhf4cm

Versions

• React: 17.0.2
• Styled Components: 5.3.1
• OS: Windows 11
• Browser: chrome