Error when moving Endpoint in an svg Element

[calss0t]

Hello! I'm trying to create a simple app that uses an svg "g" element as the container where I add other svg elements. I have no problem creating the endpoints and displaying then in the container, but when I try to move them, I get the error: "ERROR: cannot manage non-svg element when container is an SVG element."

I noticed that when clicking the point to try and move it around, jsplumb creates a div, and I have no idea where does it come from and how can I changes this.

My code looks like this:

rEndpointOptions = {
        endpoint: {
            type: DotEndpoint.type,
            options: {
                radius: 5,
                cssClass: 'plumb-endpoint',
            },
        },
        anchor: 'Right',
        maxConnections: -1,
        enabled: false,
    };

const svgContent = this.getSvgContentElement();

const layer = svgContent.querySelector('.layer');

this.instance = jsPlumbBrowserUI.newInstance({container: layer,});

this.instance.importDefaults({connectionsDetachable: false,});

function connector(source, target) {
    return {
        source: source,
        target: target,
        connector: {
            type: FlowchartConnector.type,
            options: {
                cornerRadius: 10,
            },
        },
        detachable: true,
    };
}

const node1R = this.instance.addEndpoint(
    svgContent.querySelector('#svg_I7tJF8owkZ-ozAP5Ps2tg'),
    this.rEndpointOptions,
);

const node2L = this.instance.addEndpoint(
    svgContent.querySelector('#svg_C2N7ckumsN6Welyl5FE2G'),
    this.lEndpointOptions,
);

this.instance.connect(connector(node2L,node1R),);

I would like to move the endpoint around and create new connections. I would also like to be able to move the element around and have the endpoint move with the element.

Are these two things possible?