如何使用MUI日期范围选择器正确实施反应表过滤

Question

我非常难以使用MUI Pickers中的react-table和Date Range Picker来实现日期范围过滤。说实话，我不知道如何实现这一点。以下是我正在尝试做的事情。请帮忙。

这是我自定义的日期范围过滤器：

export const SelectDateRangeFilter = ({
  column: { filterValue = [null, null], preFilteredRows, setFilter, id },
}) => {
  const [selectedDate, setSelectedDate] = useState([null, null])

  return (
    <LocalizationProvider dateAdapter={DateFnsUtils} locale={localeMap.pl}>
      <DateRangePicker
        startText="From"
        endText="To"
        value={selectedDate}
        mask={maskMap.en}
        onChange={(date) => {
          setSelectedDate(date)

          setFilter((old) => {
            return [Date.parse(date[0]) / 1000, Date.parse(date[1]) / 1000]
          })
        }}
        disableFuture
        name="calendar"
        renderInput={(startProps, endProps) => (
          <>
            <CustomMuiTextField size="small" {...startProps} />
            <CustomMuiTextField size="small" {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  )
}

这是列：

{
    Header: 'Date',
    accessor: 'createTimestamp.seconds',
    Filter: SelectDateRangeFilter,
    filter: 'between',
    Cell: (props) => {
      const date = format(
        fromUnixTime(props.row.original.createTimestamp.seconds),
        'dd-MM-yyyy',
      )

      return date
    },
  },