SVG image element flickers on mousemove event in Firefox

I have an SVG element with image item in it. I wrote a pan tool for moving this image in the SVG. Everything works perfectly on Chrome, Edge or Opera; except in Firefox, this mousemove event flickers the image or Firefox's drag & drop event mixes and it tries to drag the image.

You can see live demo here.

component.html

<svg:svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" style="background-color: #999" (mouseleave)="leave()" (mousemove)="move($event)"> 
    <image (mousedown)="down($event)" (mouseup)="up($event)" [attr.x]="x" [attr.y]="y" width="500" height="500" href="imageUrl" [style.cursor]=" panActive ? 'grabbing' : 'grab'"></image>
</svg:svg>

component.ts

panActive = false;
x = 0;
y = 0;
sX = 0;
sY = 0;
imageUrl = "https://thumbs.dreamstime.com/b/old-grunge-black-white-brick-wall-background-abstract-brickwall-texture-close-up-monochrome-background-square-wallpaper-old-131494716.jpg"

down(e: any) {
    const isMouse = !e.type.indexOf('mouse');
    
    if (isMouse && e.which !== 1 && e.buttons !== 0) {
        return;
    }
    
    e.preventDefault();
    
    this.panActive = true;
    
    this.sX = e.layerX;
    this.sY = e.layerY;
}

leave() {
    this.panActive = false;
}

move(e: any) {
    if (this.panActive) {
        e.preventDefault();

        this.x += e.layerX - this.sX;
        this.y += e.layerY - this.sY;
        
        this.sX = e.layerX;
        this.sY = e.layerY;
    }
}

up(e: any) {
    this.panActive = false;
}

I tried to fix this problem with adding pointer-events: none to my image element like this:

[ngStyle]="panActive ? {'pointer-events': 'none'} : ''"

It solves flickering, but this time mouseup event is not firing and I can not stop moving the image. How can I solve this issue?