I’m trying to customize the MUI’s DateCalendar component, expecting to add a new iconbutton in it’s header, that may collapse its content when clicking it.

Such as this:

I managed to do everything, except actually passing it the boolean for showing or not its content, because I couldn’t find a Slot to change for it. ¿Do you know what else can I do?

Here is the main component:

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { CalendarProps } from '@typings/components';
import { Dayjs } from 'dayjs';
import { DateCalendar } from '@mui/x-date-pickers';
import { KeyboardArrowDown } from '@mui/icons-material';
import React from 'react';

import { CalendarWrapper, StyledDateCalendar } from './Static-calendar.styles';
import { CustomHeader } from './custom-header/custom-header';

export const StaticCalendar: React.FC<CalendarProps> = props => {
  const { defaultValue, displayToolbar, onChange, views, value, reduceAnimations, ...rest } = props;
  const [collapse, setCollapse] = React.useState(true);

  const handleCollapse = () => setCollapse(prevState => !prevState);
  const DownArrow = () => <KeyboardArrowDown sx={{ fontSize: 24 }} />;

  return (
    <CalendarWrapper>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DateCalendar
          showDaysOutsideCurrentMonth
          value={value}
          defaultValue={defaultValue}
          handleHeaderClick={handleCollapse}
          views={views || ['year', 'month', 'day']}
          reduceAnimations={reduceAnimations}
          onChange={onChange}
          dayOfWeekFormatter={(_day, date) => (date as Dayjs).format('ddd')}
          slots={{
            switchViewIcon: DownArrow,
            calendarHeader: args => (
              <CustomHeader
                handleHeaderClick={handleCollapse}
                currentDate={value}
                collapse={collapse}
                onMonthChange={(value: unknown) => onChange(value)}
                {...args}
              />
            ),
          }}
          {...rest}
        />
      </LocalizationProvider>
    </CalendarWrapper>
  );
};

I tryed soimething like change a layout slot in the DateCalendar, but it doesn’t work. I couldn’t fine anyelse to change