react-calendar rendering too much

Question

currently I’m working on creating a custom calendar using “react-calendar” library. In my custom calendar, I’m display some markers on specific date.

To add markers to date tile, I use tileContent prop as described in docs.

Problem

In this code, I’m facing an issue where the printMarker method is repeatedly called every time when I hover over the calendar.

I'm pretty sure monthEventList's value is not changed during the rendering of the calendar for a month.

Any ideas for this issue?

Codes

const printMarker = useCallback(
    (date) => {
      const event = monthEventList?.eventList
        ?.filter((event) => {
          if (event.eventDate) {
            return (
                            // format date ex. 2023.07.11
              formatDate(new Date(Number(event.eventTimeStamp))) ===
              formatDate(date)
            );
          }
          return false;
        })
        ?.reduce((arr, event) => {
          const isDuplicate = arr.some((e) => e.event === event.event);

          if (!isDuplicate) {
            arr.push(event);
          }

          return arr;
        }, []);

      return (
        <TagBox>
          {event?.map((event, index) => {
            if (event.event === "New") {
              return <NewTag key={index} />;
            } else if (event.event === "Friend") {
              return <FriendTag key={index} />;
            } else if (event.event === "Work") {
              return <WorkTag key={index} />;
            } else {
              return null;
            }
          })}
        </TagBox>
      );
    },
    [monthEventList]
  );


// react-calendar library
<Calendar
    tileContent={({ date, view }) =>
       view === "month" && printMarker(date)
     }
        // other options... 
/>

My api call code

const [monthEventList, setMonthEventList] = useState({});

// Api call
RestApi.get(`/robotEvent`, api_params)
      .then((res) => {
        ...
        const data = res?.data;
        setMonthEventList({ ...data });
      })
      .catch((err) => {
        console.log(err);
      });
...

example of data - monthEventList

// Example montheEventList
montheEventList = {
    totalCount : 10, 
    eventList : [{
        id: 0,
        event: "Work",
        eventDate: .. // date
        // some other datas ...
    }]
}