Can't customize Mantine Calendar with function/statement

I am new to the Mantine library and I want to customize their calendar so it will shown red dates when any of the rooms is occupied. The database and other behind it is working, I tried it on react-calendar, but I wanted something more modern looking right out of the box. I can't find any tutorial on what is wrong with this or how to do it.

"use client";

import React, { useState } from "react";
import { Calendar, CalendarStylesNames } from "@mantine/dates";
import { Booking } from "../types";
import "@mantine/dates/styles.css";

interface CalendarProps {
  bookings: Booking[];
}

const MyCalendar: React.FC<CalendarProps> = ({ bookings }) => {
  const [value, setValue] = useState<Date | null>(new Date());

  const isDateOccupied = (date: Date) => {
    return (
      Array.isArray(bookings) &&
      bookings.some(
        (booking) =>
          new Date(booking.check_in_date) <= date &&
          new Date(booking.check_out_date) >= date
      )
    );
  };

  const getOccupiedRoomsForDate = (date: Date) => {
    return bookings
      .filter(
        (booking) =>
          new Date(booking.check_in_date) <= date &&
          new Date(booking.check_out_date) >= date
      )
      .map((booking) => booking.room_number);
  };

  return (
    <div>
      <Calendar
        value={value}
        onChange={setValue}
        styles={{
          day: (occupied: any) => ({
            backgroundColor: occupied ? "#ff6b6b" : "#ffffff",
            color: occupied ? "#ffffff" : "#000000",
          }),
        }}
        size="md"
      />
    </div>
  );
};

export default MyCalendar;

I was trying some variations, but I am not really good with advanced CSS because I am used to Tailwind. Here is variation I tried from other tutorial, but this one doesn't work either.

const getDayStyle = (date: Date, params: CalendarStylesParams) => {
  const isOccupied = isDateOccupied(date);

  return {
    backgroundColor: isOccupied
      ? "#ff6b6b"
      : params.day.weekend
      ? "#f0f0f0"
      : "#ffffff",
    color: isOccupied ? "#ffffff" : "#000000",
    cursor: "pointer",
  };
};

return (
  <Calendar
    value={value}
    onChange={setValue}
    dayStyle={getDayStyle}
  />

I'm not sure how to do this using styles-prop but here's one way to achive this.

Create css module file MyCalendar.module.css. The following will set different styles for disabled and non-disabled days.

.day {
    color: #000000;
    background-color: #ffffff;
    &[data-disabled] {
        color: #ffffff;
        background-color: #ff6b6b;
    }
}

Next we need to set occupied dates as disabled using the excludeDate prop.

import classes from "./MyCalenday.module.css";
...
return (
    <div>
      <Calendar
        value={value}
        onChange={setValue}
        excludeDate={(date) => isDateOccupied(date)}
        classNames={{day: classes.day}}
        size="md"
      />
    </div>
  );