Can not visualise badge with check icon in MUI X Date Picker

I am using MUI X Date Picker and React.js for this project.

The problem I have is that I can not visualise a checkIcon that should be rendered as a badge based on highlighted dates that are currently a dummy array.

I am not able to find any specific info in the documentation and tried following video explanations but nothing seems to work.

import { useState } from 'react';
import TextField from '@mui/material/TextField';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import Badge from '@mui/material/Badge';
import { PickersDay } from '@mui/x-date-pickers/PickersDay';
import CheckIcon from '@mui/icons-material/Check';

export const Calendar = () => {
  const [value, setValue] = useState(new Date());
  const [highlightedDays, setHighlightedDays] = useState([1, 2, 13]);

  return (
   
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <StaticDatePicker
        variant='static'
        orientation='portrait'
        value={value}
        disableFuture
        onChange={(newValue) => setValue(newValue)}
        renderInput={(params) => {
          <TextField {...params} />;
        }}
        renderDay={(day, _value, DayComponentProps) => {
          const isSelected =
            !DayComponentProps.outsideCurrentMonth &&
            highlightedDays.indexOf(day.getDate()) >= 0;

          return (
            <Badge
              key={day.toString()}
              overlap='circular'
              badgeContent={isSelected ? <CheckIcon color='red' /> : undefined}
            >
              <PickersDay {...DayComponentProps} />
            </Badge>
          )
        }}
      />
    </LocalizationProvider>
  );
};

I checked the MUI documentation and somehow, there isn't any of the props 'renderDay', 'renderInput' or 'variant' in the StaticDatePicker component.

Instead, you should customize your StaticDatePicker with the slots property. You can view more information on the customization options here.

I refactored your code to work with the slots property like so:

import { useState } from "react";
import {
  LocalizationProvider,
  PickersDay,
  StaticDatePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { Badge } from "@mui/material";
import CheckIcon from '@mui/icons-material/Check';

export const Calendar = () => {
  const [value, setValue] = useState(new Date());
  const [highlightedDays, setHighlightedDays] = useState([1, 2, 13]);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <StaticDatePicker
        orientation="portrait"
        value={value}
        disableFuture
        onChange={(newValue) => setValue(newValue)}
        slots={{
          day: (props) => {
            const isSelected = !props.outsideCurrentMonth && highlightedDays.indexOf(props.day.getDate()) >= 0;
          
            return (
              <Badge
                key={props.day.toString()}
                overlap="circular"
                badgeContent={isSelected ? <CheckIcon htmlColor="red" /> : undefined}
              >
                <PickersDay {...props} />
              </Badge>
            );
          },
        }}
      />
    </LocalizationProvider>
  );
};

Now everything seems to work, the days 1, 2 and 13 get correctly highlighted with a red check.