leaflet (angular) dosn't show overlay-pane

Question

I have the next map with leaflet:

private initializeMap(): void {
    let ubicacion = this.obtenerUbicacionActual();
    const center: LatLng = latLng(ubicacion[0], ubicacion[1]); // where i am
    this.map = new Map(this.mapElement.nativeElement).setView(center, 6);

    const osmLayer = new TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18
    });

    this.editableLayers = new L.FeatureGroup();
    this.map.addLayer(osmLayer);
    this.map.addLayer(this.editableLayers);

    this.drawControl = new Control.Draw({
      position: 'topright',
      draw: {
        polyline: false,
        polygon: false,
        circle: false,
        circlemarker: false, // Remove circlemarker as well
        marker: false,
        rectangle: {
          shapeOptions: {
            color: 'blue',
            weight: 2, // Ajusta el grosor del borde aquí
            opacity: 1, // Puedes ajustar la opacidad si lo deseas
            fillOpacity: 0.2 // Puedes ajustar la opacidad del relleno si lo deseas
          }
        }
      },
      // edit: {
      //   featureGroup: this.editableLayers, // REQUIRED!!
      //   remove: true
      // }
    });

    this.map.addControl(this.drawControl);

    this.map.on('draw:created', (event: L.DrawEvents.Created) => {
      this.editZoneInMap(event);
    });
  }

and a function to control the selectable areas called editZoneInMap:

editZoneInMap(event: L.DrawEvents.Created | L.DrawEvents.Edited, clearLastSquare = true) {
    const layer = event.layer;
    if (clearLastSquare) {
      this.editableLayers.clearLayers();
    }
    this.editableLayers.addLayer(layer);
    //this.map.addLayer(this.editableLayers);

    if (layer instanceof L.Rectangle) {
      const bounds = layer.getBounds();
      //--------- experiment zone ------------------------
      // NO WORK --> try to draw lines to recreate square --> same problem that square, all are in  div.leaflet_overlay_pane (0x0px and doesn't show)
      //--------- experiment zone ------------------------
    }

    //--------- experiment zone ------------------------
    // NO WORK --> layer.enableEdit(); --> if i try to force the edition do the edition wrong --> not are that i searching
    // NO WORK --> this.map.addLayer(this.editableLayers); --> the layer already exist, i can show it forcing the css in navigator, this doesn't work
    // NO WORK --> this.map.invalidateSize(); --> reset the map, but doesn't draw the square

    this.map.addLayer(this.editableLayers);
    //
    //FIXME: the div.leaflet-overlay-pane are 0x0px
    // NO WORK --> This solution doesn't work well --> it's necesary find another solution
    // const mapDiv = this.mapElement.nativeElement;
    // const mapWidth = mapDiv.offsetWidth;
    // const mapHeight = mapDiv.offsetHeight;

    // const overlayPane = document.querySelector('.leaflet-overlay-pane') as HTMLElement;
    // overlayPane.style.width = mapWidth + 'px';
    // overlayPane.style.height = mapHeight + 'px';


    //--------- experiment zone ------------------------
    this.mapUpdated.emit();
  }

My problem it's that allow select zones with a square but doesn't show the layer with the visual info. Here i post 2 images to show the problem: enter image description here

In this image are a square selected, if i enable the selection and force the display breaking the css appear this:
enter image description here. This image show how the square are created but the display of div.leaflet-overlay-pane dosn't show.

the correct response would be something like this: enter image description here. But this is made forcing the css for show an example.

i searched during days and i didn't found anything. What can be? It's that i must reload the map using something code? It's that i must add the layer directly to the map? I don't know what's wrong.

I add the scripts to angular.json:

"options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets"
            ],
            "styles": [
              "src/app/styles/application.scss",
              "node_modules/ngx-markdown-editor/assets/highlight.js/agate.min.css",
              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/leaflet-draw/dist/leaflet.draw.css"
            ],
            "scripts": [
              "node_modules/ngx-markdown-editor/assets/highlight.js/highlight.min.js",
              "node_modules/ngx-markdown-editor/assets/marked.min.js",
              "node_modules/leaflet/dist/leaflet.js",
              "node_modules/leaflet-draw/dist/leaflet.draw.js"
            ]
          },

I try into the component:

// NO WORK --> try to draw lines to recreate square --> same problem that square, all are in  div.leaflet_overlay_pane (0x0px and doesn't show)
// NO WORK --> layer.enableEdit(); --> if i try to force the edition do the edition wrong --> not are that i searching
// NO WORK --> this.map.addLayer(this.editableLayers); --> the layer already exist, i can show it forcing the css in navigator, this doesn't work
// NO WORK --> this.map.invalidateSize(); --> reset the map, but doesn't draw the square

//FIXME: the div.leaflet-overlay-pane are 0x0px
    // NO WORK --> This solution doesn't work well --> it's necesary find another solution
    // const mapDiv = this.mapElement.nativeElement;
    // const mapWidth = mapDiv.offsetWidth;
    // const mapHeight = mapDiv.offsetHeight;

    // const overlayPane = document.querySelector('.leaflet-overlay-pane') as HTMLElement;
    // overlayPane.style.width = mapWidth + 'px';
    // overlayPane.style.height = mapHeight + 'px';

I also tried to add the scripts directly into the component, and i tried to rewrite the css of:

"node_modules/leaflet/dist/leaflet.css",
              "node_modules/leaflet-draw/dist/leaflet.draw.css"

all work wrong in my case