I am user React Big Calendar and getting a depracation warning that says use javascript default parameters instead of defaultProps and cant solve it

I am having a little problem with setting up a calendar. The Calendar works, but I have been struggling a little bit with understanding a warning I have been trying to solve for a at least a couple of weeks.

I thought I have set appropriate javascript default parameters for every component related to the Calendarpage, but apprentley I dont understand the issue.

I have been reading several forums about this issue but could get it solved. It seems simple but still overlooking something.

here is my Calendar page.

Calendar PAge:

import {useState, useEffect, useMemo, useRef } from 'react'
import MainContentWrap from '../components/wraps/client/MainContentWrap' 
import CalendarInterface from '../components/interface/CalendarInterface.jsx'

import CalendarModal from '../components/modal/CalendarModal.jsx'
import { dataProvider } from '../dataProvider/main/DataProvider.jsx'
import { useGetIdentity } from 'react-admin'
import { useNotify } from 'react-admin'
import { useAuthenticated } from 'react-admin'

const dummyPlannedEvent = { 
    id: 1,
    title: 'title',
    start: 0,
    end: 0,
    resource : 1
  }

export default function CalendarPage(){
    useAuthenticated()
    const {data: userIdentity, isPending, error} = useGetIdentity()
    const notify = useNotify()
    const wrapName = 'Calendar'
    const dialog = useRef()
    
    const [plannedEvents, setPlannedEvents] = useState([dummyPlannedEvent])
    const [userSelectedEvents, setUserSelectedEvents] = useState([dummyPlannedEvent])
    const [responseRequest, setResponseRequest] = useState(null)
    const [showInModal, setShowInModal] = useState({
        title: 'test',
        startDateTime: 'xx-xx-xxx',
        endTime: 'xx-xx-xxxx',
    })
    const handleSelectEvent = useMemo(() => 
        (event) =>  { 
            const options = { month: 'short', day: 'numeric' }
            const selectedDate = new Date(event.start).toLocaleDateString('en-us', options)
            
            if(event.start < new Date()){
                let text = `This ${event.title} on ${selectedDate} has already passed!nPlease selected one of the upcoming available dates`
                window.alert(text)
                return
            }
            
            dialog.current.open()
            const extractStartTimeEvent = new Date(event.start)
            const extractEventTimeEnd = new Date(event.end)
            
            const extractDay = extractStartTimeEvent.toDateString()
            const extractStartTimeHours = extractStartTimeEvent.getHours()
            const extractStartTimeMin = extractStartTimeEvent.getMinutes()
            const startTimeEvent = extractStartTimeHours + ':' + extractStartTimeMin
            
            const extractEndTimeHours = extractEventTimeEnd.getHours()
            const extractEndTimeMin = extractEventTimeEnd.getMinutes()
            const endTimeEvent = extractEndTimeHours + ':' + extractEndTimeMin

            const allReadySelected = userSelectedEvents.find((eventId) => eventId === event.id)
            
            setShowInModal(() => ({
                    id: event.id,
                    title: event.title,
                    description: event.description,
                    day: extractDay,
                    start: startTimeEvent,
                    end: endTimeEvent,
                    allReadySelected: !!allReadySelected,
                })
            )
        }
    )

    useEffect(() => {
        dataProvider.allBlackDragonEvents('subscribe', userIdentity?.email).then((blackDragonEvents) =>{
             setUserSelectedEvents(blackDragonEvents?.userSelectedEvents)
             setPlannedEvents(blackDragonEvents?.events)
        }).catch(error => notify(`${error}`, {type: 'error'}))
    }, [])

    const standardSyle = 'p-4 mb-8 rounded-md text-center'

    console.log('plannedDragonEvents', plannedEvents)
    console.log('blackDragonEvents',userSelectedEvents)

    return(
        <>
            <CalendarModal ref={dialog} setResponseRequest={setResponseRequest}  {...showInModal} />
            <MainContentWrap name={wrapName}>
                <div className='flex-col'>
                    {responseRequest?.message != null && 
                        <section className={responseRequest.status >= 399 ? `bg-red-300 border border-red-400 text-red-700 ${standardSyle}` :`bg-green-300 border border-green-400 text-green-700 ${standardSyle}`}>
                            {responseRequest.message}
                        </section>
                    }
                    <CalendarInterface
                        getPlannedEvents={plannedEvents}
                        userSelectedEvents={userSelectedEvents}
                        clickHandle={handleSelectEvent} 
                        />
                </div>    
            </MainContentWrap>
        </>
    )
 }

CalendarInterface:

import React, {useState} from 'react'
import { Calendar, dateFnsLocalizer} from 'react-big-calendar'

import IconBxCheck from '../../assets/IconBxCheck'

import format from 'date-fns/format'
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'
import enUS from 'date-fns/locale/en-US'
import moment from 'moment/moment'

import "react-big-calendar/lib/css/react-big-calendar.css"
import "./CalendarInterface.css"

const locales = {
  'en-US': enUS,
}

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
})

const defaultPlannedEvents = [
  {
    id: 0,
    title: 'training',
    start: 0,
    end: 0,
    resource : 1
 },
 {
    id: 1,
    title: 'training',
    start: 0,
    end: 0,
    resource : 1
   }
]

const CalendarInterface = ({getPlannedEvents = defaultPlannedEvents, userSelectedEvents = [{id: 0}], clickHandle = () => {}}) => {    
    
  const components = {
    event: ({ event }) => {
      const {id, title: typeEvent} = event
  
      if(userSelectedEvents.includes(id)) {
        return ( <div style={{ display: 'inline-flex', justifyContent: 'center' ,backgroundColor: '#a6a6a6', color: '#004e00', fontWeight: 500, fontSize: 18, width: '100%' }}>{<IconBxCheck />} {typeEvent}</div>)
      }
  
      switch(typeEvent){
        case 'special':
          return( <div style={{ backgroundColor: '#d73052', color: 'white' }}>{typeEvent}</div>)
        case 'training':
          return( <div style={{ backgroundColor: '#ffb732', color: '#444444' }}>{typeEvent}</div>)
        case 'expeditie':
          return( <div style={{ backgroundColor: '#00ffa5', color: '#674ea7' }}>{typeEvent}</div>)
        default: 
          return ( <div style={{ backgroundColor: '#f0f8ff', color: 'f0f8ff' }}>{typeEvent}</div>)
      }
    }
  }

  return (<Calendar
      localizer={localizer}
      events={getPlannedEvents}
      startAccessor="start"
      endAccessor="end"
      components={components}
      onSelectEvent={clickHandle}
      defaultView={'agenda'}
      views={['agenda', 'week']}
      style={{ height: 500 }}
    />)
}


export default CalendarInterface

I hope someone can help me solve this single issue/ error