title: How to properly implement react-table filtering with MUI Date Range Picker
body: <p>I am having really hard time implementing date range filtering using <a href="https://github.com/tannerlinsley/react-table" rel="nofollow noreferrer">react-table</a> and <a href="https://v4-0-0-alpha-7.material-ui-pickers.dev/demo/daterangepicker" rel="nofollow noreferrer">Date Range Picker</a> from MUI Pickers. To tell the truth I have no idea how to implement this. Below is what I was trying to do. Please help.</p>
  
  <p>This is my custom Date Range Filter:</p>
  
  <pre><code>export const SelectDateRangeFilter = ({
    column: { filterValue = [null, null], preFilteredRows, setFilter, id },
  }) =&gt; {
    const [selectedDate, setSelectedDate] = useState([null, null])
  
    return (
      &lt;LocalizationProvider dateAdapter={DateFnsUtils} locale={localeMap.pl}&gt;
        &lt;DateRangePicker
          startText="From"
          endText="To"
          value={selectedDate}
          mask={maskMap.en}
          onChange={(date) =&gt; {
            setSelectedDate(date)
  
            setFilter((old) =&gt; {
              return [Date.parse(date[0]) / 1000, Date.parse(date[1]) / 1000]
            })
          }}
          disableFuture
          name="calendar"
          renderInput={(startProps, endProps) =&gt; (
            &lt;&gt;
              &lt;CustomMuiTextField size="small" {...startProps} /&gt;
              &lt;CustomMuiTextField size="small" {...endProps} /&gt;
            &lt;/&gt;
          )}
        /&gt;
      &lt;/LocalizationProvider&gt;
    )
  }
  </code></pre>
  
  <p>And this is the column: </p>
  
  <pre><code>{
      Header: 'Date',
      accessor: 'createTimestamp.seconds',
      Filter: SelectDateRangeFilter,
      filter: 'between',
      Cell: (props) =&gt; {
        const date = format(
          fromUnixTime(props.row.original.createTimestamp.seconds),
          'dd-MM-yyyy',
        )
  
        return date
      },
    },
  </code></pre>