FullCalendar React中eventClick/dateClick事件无法触发求助

我正在测试FullCalendar，组件加载正常，通过RTK Query拉取的事件也能正常显示，但eventClick和dateClick方法完全无法触发。目前仅设置了简单的弹窗提示，根据文档：

• eventClick无需额外插件
• dateClick需要的interactionPlugin已安装
  二者均只需作为组件props配置即可。

了解到VueJS框架下类似问题多通过调整CSS解决，但React版本的组件和插件会自动引入CSS，似乎并非此原因。希望有人能指出问题所在或提供建议。

import React, { useContext } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import { useGetUserScheduleVisitsQuery } from '../../redux/apiSlice';
import { UserContext } from '../userviews/UserContext';
import ScheduleVisit from '../visitviews/ScheduleVisit';

export default function Schedule () {
    const { user } = useContext(UserContext)
    const userId = user._id

    const { data: visits, isSuccess, isLoading} = useGetUserScheduleVisitsQuery(userId)

    const handleDateClick = () => {
        alert("clicked")
    }

    const handleEventClick = (arg) => {
        alert(arg.event.title)
        alert(arg.event.start)
    }

    return (
        <FullCalendar
            plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin ]}
            initialView="dayGridMonth"
            headerToolbar= {{
                left: 'prev,next',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            }}
            events={visits}
            dateClick={handleDateClick}
            eventClick={handleEventClick}
        />
    )
}

可能的排查方向 #

• 处理RTK Query初始状态：useGetUserScheduleVisitsQuery初始时data为undefined，直接传给events可能导致FullCalendar内部状态异常，尝试设置默认值：events={visits || []}，或者在isLoading时显示加载状态，避免初始加载的事件绑定异常。
• 统一插件版本：确保@fullcalendar/react、@fullcalendar/daygrid、@fullcalendar/timegrid、@fullcalendar/interaction的版本完全一致，版本不兼容会导致插件功能失效。
• 检查元素层级覆盖：用浏览器开发者工具检查FullCalendar容器是否被其他元素（如透明遮罩、父容器伪元素）覆盖，导致点击事件被拦截。
• 替换alert为控制台日志：弹窗可能在某些环境下被阻塞或不生效，先通过console.log确认事件处理函数是否被调用。

内容的提问来源于stack exchange，提问作者Jowz