I’m encountering an issue with the React-Draggable library in my project. I’ve implemented draggable elements using this library. Here’s a summary of the problem:

After dragging an element, I save its new position in the database. When the app is refreshed, the elements are correctly positioned based on their saved positions. However, when dragging one of the elements, the dragged element’s position offset is applied on top of the new position, causing the element to shift suddenly.

The issue occurs when using either

• the “left” and “top” CSS properties in DateTicket component with absolute positioning
• the “positionOffset” prop inside the Draggable component
• the “position” prop inside the Draggable component

however, with the “position” prop, the element shifts and returns to the correct position rapidly, it looks like a glitch.
The problem arises specifically after dragging and onStop event.

// DateTicket component

const DateTicket = ({ ticket, onStop }) => {
  const draggableRef = useRef(null);

  return (
    <Draggable
     // positionOffset={{ x: `${ticket.xPosition}px`, y: `${ticket.yPosition}px` }}
      position={{ x: ticket.xPosition, y: ticket.yPosition }}

      onStart={(e) => draggableRef.current = e.currentTarget }
      onStop={(e) => onStop(e, ticket) }
      nodeRef={draggableRef}
    >
      <div
        className="dateTicket"
        ref={draggableRef}
        // style={{ left: `${ticket.xPosition}px`, top: `${ticket.yPosition}px`}}
      >
        <span>{ticket.year}</span>
        <span>{ticket.day}</span>
        <span>{ticket.month}</span>
      </div>
    </Draggable>

// App.jsx file

function App() {

  const draggableRef = useRef(null);

  // call of queries
  const [getDateTickets, { data, error, refetch }] = useLazyQuery(
    GET_DATE_TICKETS,
    { fetchPolicy: "network-only" }
  );
  const [updateTicket, updateResponse] = useMutation(UPDATE_DATE_TICKET);

  // get all elements when mounting the app
  useEffect(() => {
    getDateTickets();
    refetch();
  }, [updateResponse?.loading]);

  // ------------------------- draggable onStop event ------------------------
  const onStop = (e, element) => {
      updateTicket({
        variables: {
          updateDateTicketId: element.id,
          data: {
            day: element.day,
            month: element.month,
            year: element.year,
            xPosition: draggableRef.current.getBoundingClientRect().x,
            yPosition: draggableRef.current.getBoundingClientRect().y,
          },
        },
      });
    refetch();
  };

  useEffect(() => {
    if (!updateResponse.error && updateResponse.data?.updateDateTicket) refetch();
  }, [updateResponse.data, updateResponse.error]);
 
  return (
    <div className="app">
        {!error?.getDateTickets &&
        !!data?.getDateTickets.length &&
        data.getDateTickets.map((ticket) => (
          <DateTicket
            key={ticket.id}
            ticket={ticket}
            onStop={onStop}
          />
        )}
    </div>
  );
}

Not using the css properties nor the “position” props, elements are placed properly after dragging but on app mounting or on refresh, all the elements are stacked at position (0,0).
thus the goal is to correctly place the elements on app mounting and onStop (after dragging) without sudden shifts in elements positions.

Any insights or suggestions would be greatly appreciated. Thank you!