How to reload data in material table when state changes? - material-table

Question

I am trying to re-render material-table when my state (props.office, props.department) changes. The data seems to reload but the page number stays the same, for example if I was on page 2 and the state changed, it calls for data for page 2 instead of calling data for page 1. Here's the code to elaborate on what I am trying to do:
function PastMaterialTable(props) {
const [isLoading, setIsLoading] = useState(true);
const tableRef = React.createRef()
useEffect(() => {
tableRef.current.onQueryChange();
},[props.office, props.department])
function questionSearch(query) {
setIsLoading(true);
return new Promise((resolve, reject) => {
let url = "https://reqres.in/api/users?";
url += "per_page=" + query.pageSize;
url += "&page=" + (query.page + 1);
url += "&office=" + (props.office + 1);
url += "&department=" + (props.department + 1);
console.log("fetching data for office: " + props.office + ", department: " + props.department + " and questions of type: " + "past" + " query pagesize: " + query.pageSize + " query page: " + (query.page+1));
fetch(url)
.then(response => response.json())
.then(result => {
setIsLoading(false);
resolve({
data: result.data,
page: result.page - 1,
totalCount: result.total
});
});
})
}
return (
<MaterialTable
tableRef= {tableRef}
columns={[
{ title: "Question", field: "id", width: 400 },
{ title: "Category", field: "first_name", width: 100 },
{ title: "Date", field: "last_name", width: 100 }
]}
data={questionSearch}
isLoading={isLoading}
options={{
showFirstLastPageButtons: false,
showEmptyDataSourceMessage: true,
toolbar: false,
pageSize: 10,
pageSizeOptions:[10],
sorting: false
}}
onRowClick={handleQuestionPopup}
/>
);
}
Any input on how I can reset my query will be appreciated