Getting multiple events on Month view. Custom component in react big calendar

Question

`I'm using react big calendar and i'm using custom component to show the monthly data in different format. But In day and week wise i'm getting the events. In month wise i have to showcase the total count of those events. I'm getting many cards on month wise view which is unnecessary. I have tried React.memo, useMemo everything but nothing works. The cards are getting recreated based on the dummy events which i'm using on Big calendar.

Calendar Component

`return (
    <div>
      <h2>React Big Calendar</h2>
      <Calendar
        localizer={localizer}
        events={dummyEvents}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 900 }}
        defaultView="month"
        eventPropGetter={() => ({
          className: 'custom-event-class',
        })}


        components={{
            month: {
        
              event: MonthEventRender,
            // event: "Walk"
            },
          }}
        
        //   views={{
        //     month: MonthEventRender,
        //     week: false,
        //     myweek: false,
        //   }}
          
        views={['week', 'month', 'day']}
        
        // views={{ week:true, month: MonthEventRender, day: true}}
        
      />
    </div>
  );
};

export default BigCalendar;
`

Custom View Component

`// src/components/EventRenderer.js
import React, { useEffect, useState } from 'react';
import moment from 'moment';


const MonthEventRender = ({ events }) => {

  // const getWalkInAndVirtualCounts = (events) => {
  //   let walkInCount = 0;
  //   let virtualCount = 0;

  //   events.forEach((event) => {
  //     // Check if the event title contains the keywords
  //     if (event.title.includes('Walk-in')) {
  //       walkInCount++;
  //     } else if (event.title.includes('Virtual')) {
  //       virtualCount++;
  //     }
  //   });

  //   return { walkInCount, virtualCount };
  // };

  // const { walkInCount, virtualCount } = getWalkInAndVirtualCounts(events);

  console.log('Virtual')

  return (
    <div>
    {/* <strong>Events</strong>
    <h1>Here we go</h1> */}
    <p>{`Walk-in Appointments - ${4}`}</p>
    <p>{`Virtual Appointments - ${5}`}</p>
  </div>
  );
};


MonthEventRender.title = ()=>("Events")

export default MonthEventRender
`

In month wise i have to showcase the total count of those events. I'm getting many cards on month wise view which is unnecessary. I have tried React.memo, useMemo everything but nothing works. The cards are getting recreated based on the dummy events which i'm using on Big calendar.`