Leaflet draw event "draw:deleted" not deleting layer

Please note that i am using @asymmetrik/ngx-leaflet-draw for Angular. I'm configuring a map where the user can draw either rectangles or polygons. I then save these to a layerGroup based on the onDrawCreated event, this is working perfectly.

I'm also aiming to delete layers based on the onDrawDeleted event, but this is for some reason not working. What i'm finally doing in the application is to save the data and convert it to GeoJSON. Then display it in the console for troubleshooting-purposes.

Component HTML:

<button (click)="checked = !checked">Edit Mode</button>
<button (click)="onSave()">Save</button>
<div id="image-map" 
leaflet 
[leafletOptions]="options" 
[leafletLayersControl]="layersControl"
    (leafletMapReady)="onMapReady($event)">
    <div *ngIf="checked" 
    leafletDraw 
    [leafletDrawOptions]="drawOptions" 
    (leafletDrawCreated)="onDrawCreated($event)" 
    (leafletDrawDeleted)="onDrawDeleted($event)">
    </div>
</div>

Part of the map and leaflet draw component:

  zones = L.featureGroup();

  onDrawCreated(e: any) {
    this.zones.addLayer(e.layer);
    console.log('Draw Created Event!', e);
    console.log(this.zones.getLayers());
  }

  onDrawDeleted(e: any) {
    this.zones.removeLayer(e);
    console.log('Draw Deleted Event!', e);
    console.log(this.zones.getLayers());
  }

  onSave() {
    const data = this.zones.toGeoJSON();
    console.log(data);
  }

Based on the documentation and other similar questions, the above code should work. But i imagine i'm missing something simple.

Iterate over the deleted layers to remove the deleted layer. If it is only one then it will be removed.

onDrawDeleted(e: any) {
    e.layers.eachLayer(layer => {
      this.zones.removeLayer(layer);
    });
    console.log("Draw Deleted Event!", e);
    console.log(this.zones.getLayers());
  }

Demo