How to show event/activity text saved on a local state in a react calender (no libraries)

Linda

I am working on a react calendar (made from the ground up, no libraries). I want to add the next functionality: on double click in a day cell, I want to use window.prompt() so the user enters the event description, save the information as {day:description} in a local state, and then display the description as a div or span in the day cell in which the user double clicked. I will disregard the time, I just want to show the activity description entered by the user.

This is the code for my Cells component, which renders all the cells for each day for each month.

import React, {useEffect, useState} from 'react'
import {startOfMonth, endOfMonth, startOfWeek, endOfWeek,
format, isSameMonth, isSameDay, addDays} from "date-fns";

export default function Cells({ currentMonth, selectedDate }) {
  const [activities, setActivities] = useState({});
  const monthStart = startOfMonth(currentMonth);
  const monthEnd = endOfMonth(monthStart);
  const startDate = startOfWeek(monthStart);
  const endDate = endOfWeek(monthEnd);
  const dateFormat = "dd";
  const rows = [];
  let days = [];
  let day = startDate;
  let formattedDate = "";

  useEffect(() => {
    console.log(activities)
  }, [activities]);

  const onDateClick = (event,day) => {
    let activity;
    if (event.detail === 2) {
      activity = window.prompt("Enter a new activity: ");
    }
    if(activity){
      setActivities({
        ...activities,
        [format(day, dateFormat)] : activity
      });
    }
  };

  while (day <= endDate) {
      for (let i = 0; i < 7; i++) {
        formattedDate = format(day, dateFormat);
        const cloneDay = day;
        days.push(
          <div
            className={`col cell ${
              !isSameMonth(day, monthStart) ? 
              "disabled" : 
              isSameDay(day, selectedDate) ? 
              "selected" : ""
            }`}
            key={day}
            onClick={(e) => onDateClick(e,cloneDay)}
          >
            <span className="number">{formattedDate}</span>

          </div>
        );
        day = addDays(day, 1);
      }
      rows.push(
        <div className="row" key={day}>
          {days}
        </div>
      );
      days = [];
  }
  return (
    <div className="body">{rows}</div>
  )
}

So my code already saves the state, but I do not know how to show the description in each cell. See the next image for a reference on what I want to accomplish:

Can somebody help?

Thanks.