How to clear selection on a date range selection?

[jojamu7]

I am currently using react day picker to select a range of dates, and that is working perfectly. I want to also have a clear button that will clear the selection that was previously made and have the date filtering not be applied whatsoever. Is there a way to do this? I'm having trouble finding a way to do this in the documentation.

[gpbl]

@jojamu7 which code have you already tried?

[jojamu7]

What I'm currently trying to do is set the filter (that sets the calendar range) to be a DateRange object. I've tried passing in a few different things as the DateRange object, such as from: undefined, to: undefined from: new Date(), to: new Date(), and some others. Maybe there's some other way that I should be doing this that I am missing.

[gpbl]

@jojamu7 please share some code 🙏

An example with a reset button (=clear selection) is here:

https://github.com/gpbl/react-day-picker/blob/main/examples/Range.tsx

export function Range() {
  const defaultMonth = new Date(2020, 5, 15);

  const defaultSelected: DateRange = {
    from: defaultMonth,
    to: addDays(defaultMonth, 4)
  };
  const [range, setRange] = useState<DateRange | undefined>(defaultSelected);

  return (
    <div>
      <DayPicker
        id="test"
        mode="range"
        defaultMonth={defaultMonth}
        selected={range}
        onSelect={setRange}
      />
      <button type="button" onClick={() => setRange(undefined)}>
        Reset
      </button>
    </div>
  );
}