Проблема с датой фильтрации в MUI-DataGrid для одного конкретного фильтра

Question

Сведения о версии: "@mui/x-data-grid": "^6.2.1"

У меня есть функция, которая создает столбцы для DataGrid, как показано ниже (только вставка соответствующего кода)

      if (prop === "date" || prop === "dateModified" || prop === "needByDate") {
      tableColumns.push({
        field: prop,
        headerName: _.startCase(prop),
        type: "date",
        flex: 1,
        minWidth: 120,
        align: "left",
        headerAlign: "left",
        valueFormatter: (params) => formatDateAndTime(params.value),
      });
    }

Функция передается в DataGrid, как показано ниже:

       <DataGrid
    rows={data}
    autoHeight={true}
    columns={CreateTableColumns({ data, detailsBool })}
    initialState={{
      pagination: { paginationModel: { pageSize: pageSize } },
    }}
    pageSizeOptions={[5, 10, 25, 50, 100]}
    onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
    onRowClick={handleRowClick ? (e) => handleRowClick(e) : null}
    components={{ Toolbar: GridToolbar }}
    getRowHeight={() => "auto"}
    disableRowSelectionOnClick
    onCellClick={onCellClick}
    checkboxSelection={checkBoxBool}
    onRowSelectionModelChange={(ids) => {
      onRowsSelectionHandler(ids);
    }}
    isRowSelectable={(params) =>
      isRowSelectable === "supplierList" &&
      !(params.row.supplierList.length >= params.row.noOfSamplesRequired)
    }
/>

код функции formateDateAndTime(value) добавлен ниже:

      export function formatDateAndTime(prop) {
  var date = new Date(prop);
  var months = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ];
  let year = date.getFullYear();
  let month = months[date.getMonth()];
  let dateVal = date.getDate();
  let minutes = date.getMinutes();
  let hours = date.getUTCHours() + 4;
  let hour = hours % 12 || 12;
  let formattedDate =
    dateVal +
    "-" +
    month +
    "-" +
    year +
    " " +
    hour +
    ":" +
    minutes +
    `${hours < 12 ? " AM GST" : " PM GST"}`;

  return formattedDate;
}

Теперь проблема, с которой я столкнулся, заключается в том, что фильтр даты в GridToolbar фильтрует все операторы, т.е. Дата есть, нет, находится после, включена или после, включена или раньше, пуста и не пуста. кроме одного оператора - есть перед.

Я пробовал использовать свойства valueGetter и renderCell вместо valueFormatter, они оба выдают ошибки еще до отображения содержимого. Я также пробовал удалить всю свою коллекцию документов и создать новые объекты, чтобы убедиться в отсутствии аномалий в данных.