The `selected` prop is not working without setting `onSelect`

Author: jiwon79Created Feb 28, 2025Updated Apr 8, 2025
Labelsbreaking change

To reproduce

stackblitz Link: https://stackblitz.com/edit/vitejs-vite-rdyvfyjg?file=src%2FApp.tsx

typescript
import { useState } from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';

const DAY_IN_MS = 24 * 60 * 60 * 1000;

function App() {
  const [range, setRange] = useState({
    from: new Date(),
    to: new Date(),
  });

  const changerPrev = () => {
    setRange({
      from: new Date(range.from.getTime() - DAY_IN_MS),
      to: range.to,
    });
  };

  return (
    <>
      <button onClick={() => changerPrev()}>prev</button>
      {/* it doesn't work */}
      <DayPicker mode="range" selected={range} />
      {/* it work */}
      <DayPicker mode="range" selected={range} onSelect={() => void 0} />
    </>
  );
}

export default App;

Actual Behavior

In the first case, the selected value does not change. In the second case, the selected value changes.

Expected Behavior

In both the first and second cases, the selected value should change.

Screenshots