Select multiple month in MonthCalendar from MUI mui/x-date-pickers

Question

So in MUI I want to select the multiple months like i can select from Jan to July and there should be border display on selected months like in MUI days selection.

<MonthCalendar 
        views={['month']} 
        disableFuture={disableFuture} 
        value={isArrowValue ? moment(arrowValue) : moment(value)} 
        minDate={moment(minDate)}  
        maxDate={moment(maxDate)}  
        onChange={handleDateChange}  
        disabled={disabled}
        slots={{
                  monthButton: CustomMonthButton,
                }}

                slotProps={{
                  monthButton: {
                    // value: startDate,
                    // startDate: moment(months.startDate),
                    maxDate: moment(maxDate),
                    startDate: startDate,
                    endDate: endDate,
                    // handleMouseOut: handleMouseOut,
                    // handleMouseOver: handleMouseOver,
                    hoverEndDate: hoverEndDate,
                    variant: variant,
                    dayPickerClasses: dayPickerClasses,
                  },
                }}
                sx={
                  isArrowValue &&
                  moment(value).format('Y') !== moment(arrowValue).format('Y')
                    ? classes.navMonthPicker
                    : classes.monthPicker
                }
              />

this is code till now and CustomMonthButton is the component that render each months So till now I pass this
monthButton: CustomMonthButton and in this add button for each months but I want something in range. am using mui/x-date-pickers ^7.22.2 and mui 5.16.7 I want same as MUI date picker where I can select in range.