Hydration problem using FullCalendar in Next.js

I've done some work with FullCalendar on React (it perfectly works) then applying it on a Next.js app it works too but I get a popup error about hydration.

With the problem that people had I can't grasp what the cause of it?

My calendar page:

function Calendrier(){
    //
    const [content,setContent]=useState({"isOpen":false,"content":{}})
    const handleEventClick = (event: EventClickArg) => {
        setContent({
            "isOpen":true,
            "content":event
        })
    }

    //
    const getEvents = (fetchInfo:any, callback:any)=>{
        retrieveData(fetchInfo.start, fetchInfo.end,callback);
    }
    const retrieveData = async (from:Date,to:Date,callback:any)=>{
        try{
            const rdv_per_day = {
    "start": "2022-04-12T06:45:00.000Z",
    "end": "2022-04-12T12:45:00.000Z",
    "aivable": 6,
    "length": 45,
    "taken": [
      "2022-04-12T07:30:00.000Z",
      "2022-04-12T09:00:00.000Z"
    ]
    }
            callback(rdv_per_day.map((doc:any)=>{
                return (
                    {
                        start:doc.start,
                        end:doc.end,
                        title:doc.aivable+" Rdv disponible",
                        allDay:false ,                            
                        taken: doc.taken,
                        length:doc.length,
                        eventTimeFormat: {
                            hour: "2-digit",
                            minute: "2-digit",
                            hour12: false
                        }
                    }
                    
                )
                
            }))
        }catch(error){
            alert(`error retrieving event: ${error}`)    
        }
        
        
    }

    return (
        <div>
            <FullCalendar
                plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                eventClick={handleEventClick}
                initialView="timeGridWeek"
                slotLabelFormat={{ hour: "2-digit", minute: "2-digit", hour12: false }}
                events={getEvents}
            />
        </div>
    )
}

export default Calendrier;

The given error is:

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Call Stack
throwOnHydrationMismatch

node_modules\react-dom\cjs\react-dom.development.js (14344:0)

tryToClaimNextHydratableInstance

node_modules\react-dom\cjs\react-dom.development.js (14372:0)

updateHostComponent$1

node_modules\react-dom\cjs\react-dom.development.js (20636:0)

beginWork

node_modules\react-dom\cjs\react-dom.development.js (22373:0)

callCallback

node_modules\react-dom\cjs\react-dom.development.js (4157:0)

invokeGuardedCallbackDev

node_modules\react-dom\cjs\react-dom.development.js (4206:0)

invokeGuardedCallback

node_modules\react-dom\cjs\react-dom.development.js (4270:0)

beginWork$1

node_modules\react-dom\cjs\react-dom.development.js (27243:0)

performUnitOfWork

node_modules\react-dom\cjs\react-dom.development.js (26392:0)

workLoopSync

node_modules\react-dom\cjs\react-dom.development.js (26303:0)

renderRootSync

node_modules\react-dom\cjs\react-dom.development.js (26271:0)

performConcurrentWorkOnRoot

node_modules\react-dom\cjs\react-dom.development.js (25577:0)

workLoop

node_modules\scheduler\cjs\scheduler.development.js (266:0)

flushWork

node_modules\scheduler\cjs\scheduler.development.js (239:0)

performWorkUntilDeadline

node_modules\scheduler\cjs\scheduler.development.js (533:0)