Custom Day

[kauajuno]

Hello guys, I'm really new to React (less than a month) so I'm sorry for posting basic struggles

I don't understand how I could create a day that renders both the default DayButton and another div containing some content (in my application context that would be the debt for that given day). Can someone help me?

My shot at it was this:

import { useState } from "react";
import { DayButton, DayPicker } from "react-day-picker";
import "react-day-picker/style.css";

export function HeraCalendar() {
  const [selected, setSelected] = useState<Date>();

  return (
    <DayPicker
      animate
      className="px-4 py-2"
      mode="single"
      selected={selected}
      onSelect={(day) => {
        console.log("DAY SELECTION HAPPENING!")
        setSelected(day)
      }}
      components={{
        Day: CustomDay
      }}
    />
  );
}

function CustomDay(props: any) {
  const { day, modifiers, ...tdProps } = props;

  return (
    <td {...tdProps}>
      <DayButton day={day} modifiers={modifiers} />
      <div className="rdp-day_debt">
        {day.date.getDate()}
      </div>
    </td>
  );
}

Hopefully I'll achieve something like this

(also sorry if there was an identical post to this here, I did not find it