Combine React Full Calendar and Xarrows

I’m trying to combine fullcalendar.io and xarrows to create dependent events.

When dragging the event I would like the arrow to remain connected to the previous event as per xarrows demo: https://lwwwp.csb.app/CustomizeArrow

When using full calendar events that is not happening.

Here is the code example: https://codesandbox.io/s/fullcalendar-xarrows-zky5sy

import FullCalendar from "@fullcalendar/react";
import React, { useState } from "react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import Xarrow, { useXarrow, Xwrapper } from "react-xarrows";

const today = new Date();
const tomorrow = new Date(new Date().getTime() + 2 * 24 * 60 * 60 * 1000);
const afterTomorrow = new Date(new Date().getTime() + 4 * 24 * 60 * 60 * 1000);

export const INITIAL_EVENTS = [
  {
    id: "1",
    title: "AAA",
    start: today.toISOString().replace(/T.*$/, "")
  },
  {
    id: "2",
    title: "BBB",
    start: tomorrow.toISOString().replace(/T.*$/, ""),
    previousId: "1"
  },
  {
    id: "3",
    title: "CCC",
    start: afterTomorrow.toISOString().replace(/T.*$/, ""),
    previousId: "2"
  },
  {
    id: "4",
    title: "DDD",
    start: afterTomorrow.toISOString().replace(/T.*$/, ""),
    previousId: "2"
  }
];

const renderEventContent = (eventInfo) => {
  return (
    <>
      <div id={eventInfo.event.id}>{eventInfo.event.title}</div>
      {eventInfo.event.extendedProps.previousId && (
        <Xarrow
          start={eventInfo.event.extendedProps.previousId}
          end={eventInfo.event.id}
          color="black"
          headSize={3}
        />
      )}
    </>
  );
};

const DemoApp = () => {
  const [events] = useState(INITIAL_EVENTS);

  const updateXarrow = useXarrow();

  return (
    <div>
      <Xwrapper>
        <FullCalendar
          events={events}
          editable
          droppable
          selectable
          headerToolbar={{
            left: "prev,next today",
            center: "title"
          }}
          plugins={[interactionPlugin, dayGridPlugin]}
          eventContent={(args) => renderEventContent(args)}
          eventDragStart={updateXarrow}
          eventDragStop={updateXarrow}
        />
      </Xwrapper>
    </div>
  );
};

export default DemoApp;