Why are the edit events not triggered?

I have a map (full example here)

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin="" />

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>

<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />

<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>

...

<div id="map" style="height: 900px;"></div>

  var map = L.map('map', { pmIgnore: false }).setView([51.505, -0.09], 13);
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  map.pm.addControls({
    position: 'topleft',
    drawCircleMarker: false,
    rotateMode: false,
  });

also i have a some logic to add some data to the map

  var shapeField = document.getElementById('shape-field').value;
  var savedPolygonData = shapeField ? JSON.parse(shapeField) : null;

  if (savedPolygonData) {
    L.geoJSON(savedPolygonData).eachLayer(function (layer) {
      allLayers.push(layer);
      layer.addTo(map);
    });
  }

and then i have checks for some events

  map.on('pm:create', function (e) {
    alert('something is created');
  });

  map.on('pm:edit', function (e) {
    alert('something is created');
  });

  map.on('pm:remove', function (e) {
    alert('something is removed');
  });

events for create and remove work well, but the edit event doesn’t work.

you can see full example here

I’d be glad for any help.