Отметки времени React AG-Grid в средстве выбора даты и времени, не соответствующие значениям данных / фильтру даты и времени AG-Grid

ДЕМО В СТЕКЕ BLITZ

Я использую AG-Grid, пакет таблиц данных, в моем проекте React. Эта таблица содержит набор значений DateTime. Чтобы отфильтровать значения DateTime в таблице, я использую слегка измененную версию пример фильтра DateTime, предоставленный документацией AG-Grid, который использует пакет Flatpickr.

Значения DateTime в моей таблице представлены в строковом формате ISO. Когда я делаю выбор с помощью календаря и часов, значения во входных данных фильтра не совпадают с тем, что я выбираю в календаре, и они не соответствуют значениям в ячейках таблицы.

Вот скриншот, показывающий разницу между выбором календаря и вводом:

А вот скриншот результатов примененных фильтров и того, как они не соответствуют входным данным:

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

ДЕМО В СТЕКЕ BLITZ

DataGrid.jsx (Документы AG-Grid для справки)

import React, { useState } from 'react';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import DateTimePicker from './DateTimePicker';
import DATES from './data/DATES.json';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const DataGrid = () => {
  const [rowData, setRowData] = useState(DATES);

  const COLUMN_DEFINITION = [
    {
      field: 'dateTime',
      headerName: 'Date Time',
      filter: 'agDateColumnFilter',
      filterParams: {
        defaultOption: 'inRange',
        // Filtering function for DateTime values:
        comparator: function(filterLocalDate, cellValue) {
          filterLocalDate = new Date(filterLocalDate);
          cellValue = new Date(cellValue);
          let filterBy = filterLocalDate.getTime();
          let filterMe = cellValue.getTime();
          if (filterBy === filterMe) {
            return 0;
          }

          if (filterMe < filterBy) {
            return -1;
          }

          if (filterMe > filterBy) {
            return 1;
          }
        }
      }
    }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={COLUMN_DEFINITION}
        rowData={rowData}
        defaultColDef={{
          sortable: true,
          filter: true,
          filterParams: {
            buttons: ['apply', 'clear', 'reset', 'cancel']
          }
        }}
        frameworkComponents={{
          agDateInput: DateTimePicker
        }}
      />
    </div>
  );
};

export default DataGrid;

DateTimePicker.jsx (Документы Flatpickr для справки):

import React, {
  useEffect,
  useState,
  useRef,
  forwardRef,
  useImperativeHandle
} from 'react';
import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.min.css';

export default forwardRef((props, ref) => {
  const [date, setDate] = useState(null);
  const [picker, setPicker] = useState(null);
  const refFlatPickr = useRef();
  const refInput = useRef();

  const onDateChanged = selectedDates => {
    const [selectedDate] = selectedDates;
    setDate(selectedDate);
    props.onDateChanged();
  };

  useEffect(() => {
    setPicker(
      flatpickr(refFlatPickr.current, {
        onChange: onDateChanged,
        dateFormat: 'Z',
        wrap: true,
        enableTime: true,
        enableSeconds: true,
        time_24hr: true
      })
    );
  }, []);

  useEffect(() => {
    if (picker) {
      picker.calendarContainer.classList.add('ag-custom-component-popup');
    }
  }, [picker]);

  useEffect(() => {
    if (picker) {
      picker.setDate(date);
    }
  }, [date, picker]);

  useImperativeHandle(ref, () => ({
    getDate() {
      return date;
    },

    setDate(date) {
      setDate(date);
    },

    setInputPlaceholder(placeholder) {
      if (refInput.current) {
        refInput.current.setAttribute('placeholder', placeholder);
      }
    },

    setInputAriaLabel(label) {
      if (refInput.current) {
        refInput.current.setAttribute('aria-label', label);
      }
    }
  }));

  return (
    <div
      className="ag-input-wrapper custom-date-filter"
      role="presentation"
      ref={refFlatPickr}
    >
      <input type="text" ref={refInput} data-input style={{ width: '100%' }} />
      <a class="input-button" title="clear" data-clear>
        <i class="fa fa-times" />
      </a>
    </div>
  );
});