Layers in Leaflet.Draw is different every time

Question

What I want:

To click delete, choose drawn layers, and delete them from the UI and firestore when clicking save

How I have it now:

Every time i am creating a new leaflet.Draw layer (ex. a rectangle), I save it to firestore, delete all, and create every layer again. This is to solve an issue of duplicating layers.

However, every time i load and create layers from firestore (or refresh the page), the layers gets new id's. I need the id's to be consistent, so that I can store the id in firebase, and use it later for deletion.

The question:

How can i do this? Or is there a better way?

The code I am using for creating is here:

    this.subscriptions.add(this.fieldmapsMainViewService.mapAnnotations$.subscribe(mapAnnotations => {
      console.log('mapAnnotations', mapAnnotations)
      this.mapAnnotations = mapAnnotations || []

      this.drawnItems.clearLayers()

      // tslint:disable-next-line:prefer-for-of
      for (let i = 0; i < this.mapAnnotations.length ; i += 1 ) {
        if (this.mapAnnotations[i].type === 'rectangle') {
          // console.log('printing rectangle')
          L.rectangle([
            [
              this.mapAnnotations[i].NW.u_,
              this.mapAnnotations[i].NW.h_,
            ],
            [
              this.mapAnnotations[i].SE.u_,
              this.mapAnnotations[i].SE.h_,
            ],
          ]).addTo(this.drawnItems)
        }
      }
    }))

The way I'm finding the id when deleting is this:

    map.on(L.Draw.Event.DELETED, e => {
      // this.dummyMethod(this.dummyValue)
      e.layers.eachLayer(layer => { console.log(layer._leaflet_id) })
    })