I am trying to implement server-side sorting with mui’s DataGrid component. Server-side pagination is working fine, but sort functionality is not. Here is my code:

const fetchData = async () => {     try {       setPageState(old => ({ ...old, isLoading: true }))       fetchPerformancePaginationData(`${queryParamsString}`+`&page_number=${pageState.page}&page_count=${pageState.pageSize}&page_sort=${pageState.sortBy}&page_sort_direction=${pageState.sortDirection}`)
.then((res) => {
if (res.status < 200 || res.status >= 300) {
throw new Error('Failed to fetch data!');
}
const json = res;
console.log('json', json);
const asinData = json.data.body.data.asin_list.map((row, index) => ({ ...row, id: index + 1 }));
const dateData = json.data.body.data.date_list.map((row, index) => ({ ...row, id: index + 1 }));
const totalDates = dateData.length;
const parentData = json.data.body.data.parent_asin_list.map((row, index) => ({ ...row, id: index + 1 }));
if (selectedTable === 'asin') {
setPageState(old => ({ ...old, isLoading: false, data: asinData, total: json.data.body.data.pagination_total}))
} else if (selectedTable === 'date') {
setPageState(old => ({ ...old, isLoading: false, data: dateData, total: totalDates}))
} else {
setPageState(old => ({ ...old, isLoading: false, data: parentData, total: json.data.body.data.pagination_total}))
}
})
console.log('pageState', pageState);
} catch (error) {
console.error('Error fetching data:', error.message);
setPageState((old) => ({ ...old, isLoading: false }));
}
};

useEffect(() => {
fetchData();
},[pageState.page, pageState.pageSize, pageState.sortBy, pageState.sortDirection, selectedTable])

const handleSortModelChange = useCallback(
(sortModel) => {
const sortField = sortModel[0]?.field || pageState.sortBy;
const sortDirection = sortModel[0]?.sort || pageState.sortDirection;
console.log('sortField', sortField);
console.log('sortDirection', sortDirection);

    setPageState((oldState) => ({
      ...oldState,
      sortBy: sortField,
      sortDirection: sortDirection,
      isLoading: true,
    }));
    
    fetchData();

},
[pageState.sortBy, pageState.sortDirection]
);

//DataGrid in the return
{selectedTable == "asin" && (
<DataGrid
autoHeight
rows={pageState.data}
rowCount={pageState.total}
sortingMode="server"
onSortModelChange={handleSortModelChange}
loading={pageState.isLoading}
rowsPerPageOptions={[5, 10, 20, 50, 100]}
pagination
page={pageState.page - 1}
pageSize={pageState.pageSize}
paginationMode="server"
onPageChange={(newPage) => {
setPageState(old => ({...old, page: newPage + 1}))
}}
onPageSizeChange={(newPageSize) => setPageState(old => ({...old, pageSize: newPageSize}))}
columns={asinColumns}
></DataGrid>
)}`

I have tried logging to see if the Data is being fetched correctly, if pageState is being updated correctly, and I am seeing those things. My goal is to be able to sort by ascending and descending based on the selected field. anything helps!