Setting rows per page and default sort id based on prop

[Soham-SoftCorner]

Describe the bug

The change in the value of defaultSortFieldId and paginationPerPage is not reflected when it is set externally.

To Reproduce

Steps to reproduce the behavior: Render a table. Pass a getter of a hook to paginationPerPage and defaultSortFieldId. Add a null check. Now set the value of the prop in the use effect that runs on a page load. The updated value is not reflected in the table. The change is only reflected when sort icon is clicked or paginationPerChange is set from the ui.

Expected behavior

The table should rerender when the prop value changes. (Even when set from the code and not ui)

Code Sandbox, Screenshots, or Relevant Code

In this code, the state of pagination and sorting is restored from redux and then the state is updated. const reStoreReduxState = (reduxKey: string) => {

if(reduxKey != '' && reportList.length > 0){
  const state = reduxObj[reduxKey] || null;
  AppUtility.clearNavDetailsObjectWithKey(reduxKey);
  if(state){
    setPaginationState((prevState) => state?.paginationParams ?? prevState);
    setSortingState((prevState) => state?.sortingParams ?? prevState);
    // setPageState((prevState) => state ?? prevState)
  }
}

} <DataTable

        columns={columns}
        data={data}
        pagination
        paginationDefaultPage={paginationState?.pageNo ?? 1}
        paginationPerPage={paginationState?.rowsPerPage ?? 10}
        onChangePage={handlePaginationPageChange}
        onChangeRowsPerPage={handleRowsPerPage}
        defaultSortFieldId={sortingState?.sortField ?? 1}

        defaultSortAsc={sortingState?.sortOrder == SortOrder.asc  || false}
        onSort={(column, direction) => {handleSortChange(column.id,direction)}}
      
      />