Unexpected behavior of svg draggable/panzoom - svg

Question

I need to use svg.js 3 with draggable and panzoom plugins. What I need to do is create some shapes and group it together and then attach draggable to entire group.
This is the code I managed so far:
var canvas = SVG()
.addTo('#svg-canvas')
.size($(window).width(), $(window).height())
.viewbox('0 0 ' + $(window).width() + ' ' + $(window).height())
.panZoom({
zoomFactor: 0.1,
wheelZoom: true,
zoomMin: 0.25,
zoomMax: 4
})
.zoom(2);
const headerHeight = 40;
const rowHeight = 24;
const radius = 4;
const borderTop = 1
const margin = 2;
const table = canvas.group();
const tableWrapper = canvas.rect(200, headerHeight).fill("#fff");
tableWrapper.radius(radius);
table.add(tableWrapper);
const headerWrapper = canvas.rect(200, headerHeight - radius).fill("transparent");
headerWrapper.move(0, radius);
table.add(headerWrapper);
const headerContent = canvas.foreignObject(200, headerHeight - radius);
headerContent.move(0, radius);
headerContent.add($('\
<div style="display:flex;justify-content:space-between;display:flex;padding:8px;margin-top:-1px;">\
<div>Header</div>\
<div>PK</div>\
</div>\
')[0]);
table.add(headerContent);
tableWrapper.height(44);
table.move(180, 150);
table.draggable();
Here is jsfiddle to test: https://jsfiddle.net/grayter/uhde3ykw/29/
The problem is that when I try to drag group the content of the group is flowing. I suppose that panzoom plugin is the reason of that behavior (it seems like draggable and panzoom drag event are interfering).
What am I missing? Is there a way to fix this issue?