handleRangeChange and filteredData run mutliple times on mount and on every navigation click

[wauters]

On the initial render, and whenever I click Next or Prev, both handleRangeChange and the filteredData execute multiple times.

Steps to reproduce

1. Mount the component containing the two functions shown below.
2. Open the browser console and reload the page.
3. Note that each log entry appears twice.
4. Click Next or Prev and observe the same duplication.

Relevant code

I just added console.log basically.

const handleRangeChange = useCallback((range: ParsedDatesRange) => {
  setRange(range);
  console.log("range:", range);
}, []);

const filteredData = useMemo(() => {
  console.log("Filtering data with range:", range);
  return mocked.map((person) => ({
    ...person,
    data: person.data.filter(
      (project) =>
        dayjs(project.startDate).isBetween(range.startDate, range.endDate) ||
        dayjs(project.endDate).isBetween(range.startDate, range.endDate) ||
        (dayjs(project.startDate).isBefore(range.startDate, "day") &&
          dayjs(project.endDate).isAfter(range.endDate, "day"))
    )
  }));
}, [mocked, range.endDate, range.startDate]);

Console output initial mount

App.tsx:39 Filtering data with range: {startDate: Mon Jul 21 2025 12:17:55 GMT+0200 (Central European Summer Time), endDate: Mon Jul 21 2025 12:17:55 GMT+0200 (Central European Summer Time)}
App.tsx:39 Filtering data with range: {startDate: Mon Jul 21 2025 12:17:55 GMT+0200 (Central European Summer Time), endDate: Mon Jul 21 2025 12:17:55 GMT+0200 (Central European Summer Time)}
App.tsx:34 range:  {startDate: Mon Aug 11 2025 12:17:55 GMT+0200 (Central European Summer Time), endDate: Mon Jun 30 2025 12:17:55 GMT+0200 (Central European Summer Time)}
App.tsx:34 range:  {startDate: Mon Aug 11 2025 12:17:55 GMT+0200 (Central European Summer Time), endDate: Mon Jun 30 2025 12:17:55 GMT+0200 (Central European Summer Time)}
App.tsx:39 Filtering data with range: {startDate: Mon Aug 11 2025 12:17:55 GMT+0200 (Central European Summer Time), endDate: Mon Jun 30 2025 12:17:55 GMT+0200 (Central European Summer Time)}
App.tsx:39 Filtering data with range: {startDate: Mon Aug 11 2025 12:17:55 GMT+0200 (Central European Summer Time), endDate: Mon Jun 30 2025 12:17:55 GMT+0200 (Central European Summer Time)}
App.tsx:34 range:  {startDate: Fri Feb 14 2025 12:17:55 GMT+0100 (Central European Standard Time), endDate: Fri Dec 26 2025 12:17:55 GMT+0100 (Central European Standard Time)}
App.tsx:39 Filtering data with range: {startDate: Fri Feb 14 2025 12:17:55 GMT+0100 (Central European Standard Time), endDate: Fri Dec 26 2025 12:17:55 GMT+0100 (Central European Standard Time)}
App.tsx:39 Filtering data with range: {startDate: Fri Feb 14 2025 12:17:55 GMT+0100 (Central European Standard Time), endDate: Fri Dec 26 2025 12:17:55 GMT+0100 (Central European Standard Time)}

Console output Next/Prev navigation

App.tsx:34 range:  {startDate: Fri Feb 14 2025 12:17:55 GMT+0100 (Central European Standard Time), endDate: Fri Dec 26 2025 12:17:55 GMT+0100 (Central European Standard Time)}
App.tsx:34 range:  {startDate: Fri Feb 28 2025 12:17:55 GMT+0100 (Central European Standard Time), endDate: Fri Jan 09 2026 12:17:55 GMT+0100 (Central European Standard Time)}
App.tsx:39 Filtering data with range: {startDate: Fri Feb 28 2025 12:17:55 GMT+0100 (Central European Standard Time), endDate: Fri Jan 09 2026 12:17:55 GMT+0100 (Central European Standard Time)}
App.tsx:39 Filtering data with range: {startDate: Fri Feb 28 2025 12:17:55 GMT+0100 (Central European Standard Time), endDate: Fri Jan 09 2026 12:17:55 GMT+0100 (Central European Standard Time)}

Expected behaviour

Each function should run exactly once per user action.