MoveableJS on SVG surrounded rectangle is misplaced

I'm using MoveableJS to manipulate (translate, scale, rotate, ...) SVG elements (path, text, rect ...) in Angular project

The problem is that the surrounded rectangle provided by moveableJS is misplaced (wrong width, height, and starting point).

Bellow is what I tried to do:

HTML

<div id='canvas' class="canvas mt-4 text-center align-self-center" (click)="canvasClicked($event)"
                    style="background-color: white; background-image: url(../../assets/svgs/canva-background.svg);">

    <svg version="1.2" baseProfile="tiny" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
        <text id="text" transform="matrix(1 0 0 1 31.1271 199.1222)" fill="#561010" font-family="'Roboto-Regular'" font-size="25.3945px">Nom d’entreprise</text>
        <g>
            <path transform="matrix(1 0 0 1 0 0)" fill="#000" d="M51.75,55.77c-0.27-0.39,3.97-5.2,10.38-7.74c1.79-0.71,11.97-4.75,21.31,0.8 c8.61,5.12,11.99,15.71,10.53,24.27c-2.38,13.95-17.76,23.37-22.24,20.72c-0.97-0.57-1.32-2.75-1.99-7.09 c-1.81-11.84-1.68-20.54-1.68-20.54c0.05-3.05,0.19-4.38-0.61-6.25c-1.42-3.32-4.9-6.23-8.62-6.47 C54.84,53.21,51.97,56.08,51.75,55.77z"></path>
        </g>
    </svg>
</div>
    <div class="label" style="z-index: 9999999;" #label></div>
    <ngx-moveable
        #moveable
        [target]="target"
        [draggable]="true"
        [scalable]="true"
        [origin]="true"
        [snappable]="true"
        [throttleResize]="0"
        [keepRatio]="true"
        (dragStart)="onDragStart($event)"
        (drag)="onDrag($event)"
        (scaleStart)="onScaleStart($event)"
        (scale)="onScale($event)"
        (scaleEnd)="onScaleEnd($event)"
    >
    </ngx-moveable>

TypeScript

@ViewChild("target", { static: false }) target;
@ViewChild("label", { static: false }) label: ElementRef;
@ViewChild("moveable", { static: false }) moveable: NgxMoveableComponent;

frame = {
    translate: [0, 0],
    scale: [1, 1],
};

onWindowReisze = () => {
    this.moveable.updateRect();
};

onDragStart({ set }) {
    let matrix = this.menuService.getElementMatrix(this.target);
    this.frame.translate = [Number(matrix.x) * this.alignmentService.rapport, Number(matrix.y) * this.alignmentService.rapport]
    set(this.frame.translate);
}
onDrag({ target, beforeTranslate, clientX, clientY }) {
    this.frame.translate = beforeTranslate;
    target.style.transform
        = `translate(${(beforeTranslate[0]/this.alignmentService.rapport)}px, ${(beforeTranslate[1]/this.alignmentService.rapport)}px)`;
}
onDragEnd({ target, isDrag}) {
    console.log("onDragEnd", target, isDrag);
}

onScaleStart({ set, dragStart }) {
    set(this.frame.scale);

    // If a drag event has already occurred, there is no dragStart.
    dragStart && dragStart.set(this.frame.translate);
}
onScale({ target, scale, drag }) {
  this.frame.scale = scale;
  // get drag event
      this.frame.translate = drag.beforeTranslate;
      target.style.transform
          = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`
          + `scale(${scale[0]}, ${scale[1]})`;
  }
onScaleEnd({ target, isDrag, clientX, clientY }) {
    console.log("onScaleEnd", target, isDrag);
}
async ngOnInit() {
    window.addEventListener("resize", this.onWindowReisze);
}

In the image below is a demonstration of the issue (i clicked on the leaf)