Why is there no edit point?

[trowa1234]

leaflet: 1.7.1
leaflet-freedraw: 2.13.2

createDraw() {
      this.freeDrawInstance = new FreeDraw({
        mode: CREATE | EDIT | DELETE
      });
      this.MAP.addLayer(this.freeDrawInstance);
      this.freeDrawInstance.on('markers', event => {
        console.log(event.latLngs);
      });
    }

my screenshot:

Example screenshot:

[thucvu97]

it works
import FreeDraw, { ALL} from 'leaflet-freedraw';
const freeDraw = new FreeDraw({ mode: ALL });

update css

.leaflet-container {
height: 400px;
width: 90%;
margin: 0 auto;
}

path.leaflet-line {
stroke: #50622b;
stroke-width: 2;
}

div.leaflet-edge {
background-color: #95bc59;
box-shadow: 0 0 0 2px white, 0 0 10px rgba(0, 0, 0, 0.35);
border-radius: 50%;
cursor: move;
outline: none;
transition: background-color 0.25s;
}

div.leaflet-edge.disabled {
pointer-events: none;
background-color: #bbb;
}

path.leaflet-polygon {
fill: #b4cd8a;
stroke: #50622b;
stroke-width: 2;
fill-opacity: 0.75;
}

.map.mode-create {
cursor: crosshair;
}

.checkboxContainer {
display: flex;
flex-direction: column;
margin: 40px 40px;
}