Material Ui XGrid filterMode is not working in React app

I have a React component using XGrid. The filtering option for the DateTime type is working fine in the dev environment but it is not working in staging (production) environment. So, I have tried to add filterMode: "server" and/or onFilterModelChange={onFilterChange}. It didnt work...

I followed the Material-UI documentation on server-side filtering.

Please find the code below:

export default function DeviceList() {
  const [page, setPage] = useState(0);
  const [pageSize, setPageSize] = useState(50);
  const [filterValue, setFilterValue] = useState();

  const dispatch = useDispatch();
  const historyList = useSelector(
    (state) => state.reducer.data || []
  );

  const historyListTotal = useSelector(
    (state) => state.reducer.total
  );

  const onFilterChange = React.useCallback((params) => {
    setFilterValue(params.filterModel.items[0].value);
    console.log("params", params.filterModel.items[0].value);
  }, []);

  useEffect(() => {
    dispatch(readDevices(`/history`, page + 1, pageSize));
  }, [dispatch, page, pageSize, filterValue]);

  const fetchLoader = () => {
    dispatch(showLoader());
    setTimeout(() => {
      dispatch(hideLoader());
    }, 750);
  };

  const onHandlePageChange = (param) => {
    setPage(param.page);
  };

  const onHandlePageSizeChange = (param) => {
    setPageSize(param.pageSize);
    setPage(0);
  };

  let rows = historyList.map((obj, index) => {
    return (rows = {
      id: index + 1,
      ID: obj.device_mrid,
      "Communication Status": obj.device_status,
      "Last Reading": obj.status_updated_time,
    });
  });

  const columns = [
    {
      field: "ID",
      flex: 1,
    },
    {
      field: "Communication Status",
      flex: 1,
    },
    {
      field: "Last Reading",
      flex: 1,
      type: "dateTime",
      // filterMode: "server",
    },
  ];
  return (
    <div>      
      <div style=>
        <MuiThemeProvider theme={MaterialTheme}>
          <XGrid
            pageSize={pageSize}
            page={page}
            rowsPerPageOptions={[25, 50, 100]}
            rowCount={historyListTotal}
            onPageChange={onHandlePageChange}
            onPageSizeChange={onHandlePageSizeChange}
            rows={rows}
            columns={columns}
            paginationMode="server"
            pagination={true}
            //Server-side filtering
            filterMode="server"
            onFilterModelChange={onFilterChange}
            //           
          />
        </MuiThemeProvider>
      </div>
    </div>
  );
}

from Material Ui XGrid filterMode is not working in React app