title: React-table date range filter
body: <p>I'm trying to implement a date range filter in my React-table. When I'm changing the start or end date, it triggers the filter function, creating the min and max date but when it finishes no dates are being filtered and the input is empty from the chosen date.
  this is my code:</p>
  <pre><code>const ChartData = () =&gt; {
  const columns = React.useMemo(
  () =&gt; [
    {
      Header: &quot;Date&quot;,
      columns: [
        {
          Header: &quot;Date&quot;,
          accessor: &quot;date&quot;,
          id: &quot;date&quot;,
          Filter: chartFilter.DateRangeColumnFilter,
          filter: &quot;between&quot;
        }
      ]
    }
  ],
  []
  );
  
  const data = React.useMemo(() =&gt; dummyData(100000), []);
  
  return (
     &lt;div className={classes.tableWrapper}&gt;
        &lt;Table columns={columns} data={data} /&gt;
     &lt;/div&gt;
   );
  };
  export default ChartData;
  </code></pre>
  <p>filter page:</p>
  <pre><code>  export function DateRangeColumnFilter({
       column: { filterValue = [], preFilteredRows, setFilter, id }
       }) {
       const [min, max] = React.useMemo(() =&gt; {
       let min = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]).getTime() : 0;
       let max = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]).getTime() : 0;
  
    preFilteredRows.forEach((row) =&gt; {
       min = Math.min(new Date(row.values[id]).getTime(), min);
       max = Math.max(new Date(row.values[id]).getTime(), max);
     });
    return [min, max];
   }, [id, preFilteredRows]);
  
   return (
  &lt;div style={{display: &quot;flex&quot;}}&gt;
    &lt;input
      value={filterValue[0] || &quot;&quot;}
      type=&quot;date&quot;
      onChange={(e) =&gt; {
        const val = e.target.value;
        setFilter((old = []) =&gt; [val || undefined, old[1]]);
      }}
      style={{
        width: &quot;70px&quot;,
        marginRight: &quot;0.5rem&quot;
      }}
    /&gt;
    to
    &lt;input
      value={filterValue[1] || &quot;&quot;}
      type=&quot;date&quot;
      onChange={(e) =&gt; {
        const val = e.target.value;
        setFilter((old = []) =&gt; [old[0], val || undefined]);
      }}
      style={{
        width: &quot;70px&quot;,
        marginLeft: &quot;0.5rem&quot;
      }}
    /&gt;
   &lt;/div&gt;
   );
  }
  </code></pre>
  <p>What I'm missing here?</p>