MUI v7 View is changed when clicking date outside of the current month even showDaysOutsideCurrentMonth is true

I am migrating my <StaticDatePicker /> from MUI version 5 to MUI version 7.

const renderWeekPickersDay = (pickersDayProps: PickersDayProps<Date>) => (
    <DayPicker
      key={pickersDayProps.key}
      date={pickersDayProps.day}
      selectedDates={selectedDates}
      hoveredDates={hoveredDates}
      onWeekPickerClick={onWeekPickerClick}
      onWeekHovered={onWeekHovered}
      pickersDayProps={pickersDayProps}
      firstDayOfWeekStyles={{ marginLeft: "92px" }}
      onDateChange={onDateChange}
    />
  );


<StaticDatePicker
  displayStaticWrapperAs="desktop"
  disableHighlightToday={false}
  maxDate={TODAY}
  autoFocus
  value={currentMonth}
  onChange={onDateChange}
  onMonthChange={onMonthChange}
  showDaysOutsideCurrentMonth
  minDate={START_DATE}
  slots={{
   leftArrowIcon: LeftArrowIcon,
   rightArrowIcon: RightArrowIcon,
   switchViewButton: () => null,
   day: renderWeekPickersDay,
  }}
 />


  const onDateChange = (date: Date | null) => {
    if (!date) return;
    const isSelected = selectedDates.some((selectedDate) => isSameDay(selectedDate, date));
    if (isSelected) {
      const prevDates = selectedDates.filter((d) => !isSameDay(d, date));
      setFieldValue("selectedDates", prevDates);
    } else {
      setFieldValue("selectedDates", [...selectedDates, date]);
    }
  };

after migration to version 7 when I'm clicking date outside current month, the month is changed rather than selecting the date. In the previous version 5 I was able to select date outside of the current month.

In onDateChange the even come with correct date, but since month view is changed it refreshes the selected dates.

I’m using @mui/date-pickers: 7.23.2 and @mui/material: 5.16.8

The fix of this issue was adding onDaySelect in my custom DayPicker. In version 5 of MUI this wasn't needed (I was passing the function from the pickerDayProps.onDaySelect) and everything worked fine but after updating I need to pass this function and started working.

before:

<StyledDayPickersDay
        day={pickersDayProps.day}
        outsideCurrentMonth={pickersDayProps.outsideCurrentMonth}
        onDaySelect={pickersDayProps.onDaySelect}
        showDaysOutsideCurrentMonth={pickersDayProps.showDaysOutsideCurrentMonth}
        disabled={pickersDayProps.disabled}
        disableMargin
        isSelected={isSelected}
        isHovered={isHovered}
        onClick={() => onDateChange(date)}
      />

after:

<StyledDayPickersDay
        day={pickersDayProps.day}
        outsideCurrentMonth={pickersDayProps.outsideCurrentMonth}
        onDaySelect={onDateChange} <-- I added this line only
        showDaysOutsideCurrentMonth={pickersDayProps.showDaysOutsideCurrentMonth}
        disabled={pickersDayProps.disabled}
        disableMargin
        isSelected={isSelected}
        isHovered={isHovered}
        onClick={() => onDateChange(date)}
        isFirstVisibleCell={false}
        isLastVisibleCell={false}
      />