React Big Calendar TypeScript Error - Type 'ComponentType<{ day: Date }>' not assignable to type 'ComponentType<{}> | undefined'

Question

I am working on a React project with TypeScript, using the React Big Calendar library. I have a custom agenda date component that receives a day prop of type Date. The component works fine within a TypeScript (.tsx) file, but when I try to include it in the Calendar component from React Big Calendar, I encounter a type error.

Here's the relevant part of the code:

// CustomAgendaDate component
const CustomAgendaDate = ({ day }: { day: Date }) => {
  return (
    <div>
      <strong>{days[moment(day).day()]}</strong>
      {' '}
      {' '}
    </div>
  );
};

// In the Calendar component
<Calendar
  // Other props...
  components={{
    // Other components...
    agenda: {
      // Other components...
      date: CustomAgendaDate as React.ComponentType<{ day: Date }>,
    },
  }}
/>

The line date: CustomAgendaDate as React.ComponentType<{ day: Date }>, gives the following error:

No overload matches this call.
  Overload 1 of 2, '(props: CalendarProps<Event, object> | Readonly<CalendarProps<Event, object>>): Calendar<Event, object>', gave the following error.
    Type 'ComponentType<{ day: Date; }>' is not assignable to type 'ComponentType<{}> | undefined'.
      Type 'ComponentClass<{ day: Date; }, any>' is not assignable to type 'ComponentType<{}> | undefined'.
        Type 'ComponentClass<{ day: Date; }, any>' is not assignable to type 'ComponentClass<{}, any>'.
          Types of property 'getDerivedStateFromProps' are incompatible.
            Type 'GetDerivedStateFromProps<{ day: Date; }, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
              Type 'GetDerivedStateFromProps<{ day: Date; }, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
                Types of parameters 'nextProps' and 'nextProps' are incompatible.
                  Property 'day' is missing in type 'Readonly<{}>' but required in type 'Readonly<{ day: Date; }>'.
  Overload 2 of 2, '(props: CalendarProps<Event, object>, context: any): Calendar<Event, object>', gave the following error.
    Type 'ComponentType<{ day: Date; }>' is not assignable to type 'ComponentType<{}> | undefined'.ts(2769)
schedule.tsx(73, 61): 'day' is declared here.

I have tried different approaches, including casting CustomAgendaDate to React.ComponentType<{}> | undefined, but the error persists. How can I resolve this TypeScript error and successfully include my custom agenda date component in the React Big Calendar?

It does work if we use //@ts-nocheck

here the full code:

//@ts-nocheck
import React, { useEffect } from 'react';
import { Calendar, momentLocalizer, Event, Day } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { Card, CardContent, CardHeader } from '@mui/material';
interface MyCalendarProps {
  events: Event[];
}

const localizer = momentLocalizer(moment);

const ScheduleCalendar: React.FC<MyCalendarProps> = ({ events }) => {
  useEffect(() => {
    // Log events to the console when the component mounts
    console.log('Events:', events);
    // or use alert
    //alert(JSON.stringify(events, null, 2));
  }, [events]);

  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  const CustomToolbar = () => {
    return (
       <></>
     
    );
  };

  const CustomAgendaDate = ({ day }: { day: Date}) => {
    return (
      <div>
        <strong>{days[moment(day).day()]}</strong>
        {' '}
        {' '}
      </div>
    );
  };

  const CustomAgenda = ({ event }: { event: Event }) => {
    return (
      <div>
        <strong>Repeats Every {days[moment(event.start).day()]}</strong>
        {' '}
        {moment(event.start).format('h:mm a')} – {moment(event.end).format('h:mm a')}
        {' '}
        {event.title}
      </div>
    );
  };

  const components = {
    header: ({ date }: { date: Date }) => <span>{days[moment(date).day()]}</span>,
    toolbar: () => <></>,
    agenda: {
      event: CustomAgenda,
      date: CustomAgendaDate,
    },
  };

  return (
    <div style={{ height: '250px' }}>
      <Calendar
        localizer={localizer}
        events={events}
        startAccessor="start"
        endAccessor="end"
        defaultView="agenda"
        components={{
          header: ({ date }) => <span>{days[moment(date).day()]}</span>,
          toolbar: CustomToolbar,
          agenda: {
            event: CustomAgenda,
            date: CustomAgendaDate as React.ComponentType<{ day: Date }>,
            
          },
        }}
        views={['agenda']}
        messages={{ date: 'Air', event: 'List', }}
      />
    </div>
   
  );
};

export default ScheduleCalendar;