React big calendar drag and drop not working inside shadow dom

Question

I'm trying to integrate the react-big-calendar within a Preact web component while incorporating drag-and-drop functionality. However, upon enabling the shadow DOM, the drag-and-drop feature ceases to function. Conversely, it operates seamlessly when the shadow DOM is disabled.

import { Calendar, momentLocalizer, View } from "react-big-calendar";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
import moment from "moment";
const CalendarComponent = () => {
  const localizer = momentLocalizer(moment);
  const DragAndDropCalendar = withDragAndDrop(Calendar);
  return   <DragAndDropCalendar
    localizer={localizer}
    selectable
   
    events={eventss}
    onEventDrop={moveEvent}
    resizable
    onEventResize={resizeEvent}
    defaultView={"day"}
    defaultDate={new Date(2015, 3, 12)}
  />