Draggable html element with translateY is below pointer

Question

Using Vue3/Vite with Ag-Grid and Fullcalendar6 with timeline view. I've setup two components (ag-grid and fullcalendar) and want to drag rows from ag-grid to fullcalendar, manage to do this successfully with Draggable.

  new Draggable(draggableElement, {
    itemSelector: '.ag-row',
    appendTo: containerElement,
    eventData(eventEl) {
      const rowIndex = parseInt(eventEl.attributes['row-id'].value)
      const rowData = gridOptions.api.getRowNode(rowIndex).data
      return {
        uuid: rowData.uuid,
        title: rowData.title,
        description: rowData.description,
      }
    },
  })

The problem I'm encountering is that the div rows in ag-grid is built up by using and so on, 42 px is the second row because it is its height. I'm then facing that the first line is dragged nicely positioned at the mousepointer but all the following rows is misaligned with the expected px below my mousepointer.

image of misaligned element being dragged

I've tried using the appendTo option in draggable and wrap the "ghost" element being dragged with a div that should counteract this translate but it does not align at all.

I have also tried to remove the translate style or set it to none but then it breaks the ag-grid view because the ghost element seems to be a direct (and linked?) copy of the element being dragged.

Is there no way to manipulate the ghost element ?