如何在 Next.js 中导入 @fullcalendar/react 来避免 Hydration failed 警告？

Question

当我添加以下组件时，我在 Next.js 中收到此警告，这是怎么回事？

全日历有什么不兼容的吗？

// ** Full Calendar & it's Plugins
import FullCalendar from '@fullcalendar/react'
import listPlugin from '@fullcalendar/list'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import { CalendarType } from './types'

const Calendar = ({ events, eventClick }: CalendarType) => {
    const views = {
        dayGridMonth: { buttonText: 'Month' },
        timeGridWeek: { buttonText: 'Week' },
        timeGridDay: { buttonText: 'Day' },
        listMonth: { buttonText: 'List' },
    }

    return (
        <FullCalendar
            plugins={[dayGridPlugin, timeGridPlugin, listPlugin]}
            initialView="dayGridMonth"
            headerToolbar={{
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
            }}
            views={views}
            contentHeight="auto"
            events={events}
            eventClick={eventClick}
        />
    )
}

export default Calendar

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?ac89:12507:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?ac89:12535:1)
    at updateHostComponent (react-dom.development.js?ac89:19902:1)
    at beginWork (react-dom.development.js?ac89:21618:1)

只有在按下预加载的事件时才会收到此警告！