Highlight the days in MUI StaticDatePicker Calender

I'm trying implement MUI StaticDatePicker to my react website. What I want is to highlight several days in the calendar using blue circle or a badge. I tried various methods achieve this but I couldn't get the highlighted dates output in the calendar. If anyone knows how to do this pls help me. In the below code I'm trying to highlight the highlightDays state values in calendar.

I used dayjs library handle time and date realated data in my website. But whatever reason I couldn't see my renderDay is running. Finally what I want to achieve is block the date prior to the today which is dates before the current dates and highlight the upcoming event dates in the calendar.

import { React, useState } from "react";
import dayjs from "dayjs";
import { Box, TextField } from "@mui/material";
import { Loading } from "../pages/index.mjs";
import { EventCard } from "./index.mjs";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";
import { useReadAllEvent } from "../hooks/useEvent.mjs";
import { PickersDay } from "@mui/x-date-pickers";
import { Badge } from "@mui/material";
const SessionBooking = ({ doctor }) => {
const [value, setValue] = useState("");
const [highlightDays, setHighlightDays] = useState([
"2023-06-01",
"2023-06-02",
"2023-06-04",
]);
console.log(value);
const { data: eventSet, isLoading } = useReadAllEvent({
onSuccess: (message) => {},
onError: (message) => {},
session: { id: doctor, today: dayjs().format("YYYY-MM-DD") },
});
if (isLoading) return <Loading />;
console.log(eventSet);
const events = eventSet.map(
({ key, countPatient, start, end, maxPatients }) => (
<EventCard
key={key}
started={start}
ended={end}
patients={countPatient}
max={maxPatients}
/>
)
);
return (
<Box
mt={2}
sx={{
display: "grid",
gridTemplateColumns: {
xs: "repeat(1, 1fr)",
sm: "repeat(1, 1fr)",
md: "repeat(2, 1fr)",
},
gap: 1,
}}
>
<Box>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<StaticDatePicker
orientation="portrait"
openTo="day"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
renderDay={(day, _value, DayComponentProps) => {
const isSelected =
!DayComponentProps.outsideCurrentMonth &&
highlightDays.includes(dayjs(day).format("YYYY-MM-DD"));
return (
<Badge
key={day.toString()}
overlap="circular"
badgeContent={isSelected ? "-" : undefined}
color="primary"
>
<PickersDay {...DayComponentProps} />
</Badge>
);
}}
/>
</LocalizationProvider>
</Box>
<Box>{events}</Box>
</Box>
);
};
export default SessionBooking;

Like steve said <StaticDatePicker /> doesn't accept renderDay prop in newer version. Instead have to use slots. Code for StaticDatePicker

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React, { useState } from "react";
import dayjs from "dayjs";
import { useReadAllEvent } from "../hooks/useEvent.mjs";
import { Box } from "@mui/material";
import { styled } from "@mui/material/styles";
import { Loading } from "../pages/index.mjs";
import { EventCard } from "./index.mjs";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { PickersDay } from "@mui/x-date-pickers/PickersDay";
import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";
const HighlightedDay = styled(PickersDay)(({ theme }) => ({
"&.Mui-selected": {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
}));
//higlight the dates in highlightedDays arra
const ServerDay = (props) => {
const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props;
const isSelected =
!props.outsideCurrentMonth &&
highlightedDays.includes(day.format("YYYY-MM-DD"));
return (
<HighlightedDay
{...other}
outsideCurrentMonth={outsideCurrentMonth}
day={day}
selected={isSelected}
/>
);
};
const SessionBooking = ({ doctor }) => {
const [value, setValue] = useState("");
const [highlightedDays, setHighlitedDays] = useState([
"2023-07-01",
"2023-07-09",
"2023-07-21",
"2024-07-12",
]);
const today = dayjs();
return (
<Box>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<StaticDatePicker
defaultValue={today}
minDate={today}
maxDate={today.add(1, "month")}
slots={{
day: ServerDay,
}}
slotProps={{
day: {
highlightedDays,
},
}}
/>
</LocalizationProvider>
</Box>
);
};
export default SessionBooking;

<!-- end snippet -->