Draw polygon from API Data using React-leaflet and click event

Question

I'm using react-leaflet and Geoman, to draw polygons on the map, I have an API that provides me with a GeoJSON. I can draw the shapes easily using const polygon = L.polygon(props.coordinates).addTo(context.map);, but I'm trying to click on the polygon and enable editing, so when I click a few times it works, but after 4 times I click to select the vertices start to disappear.

My Function to draw the Polygon

function Polygon(props) {
const context = useLeafletContext();

useEffect(() => {
    const polygon = L.polygon(props.coordinates).addTo(context.map);

    // When click event is triggered
    polygon.on('click', function () {

        // Enable edit mode on polygon
        polygon.pm.toggleEdit({
            snappable: true,
            draggable: true,
        });
    });


    // Clear
    return () => {
        // Disable edit when polygon is removed
        if (polygon.pm && polygon.pm.enabled()) {
            polygon.pm.toggleEdit();
        }
    };
}, [props.coordinates, context.map]);

return null;
}

function Map() {
  return (
    <MapContainer
      id="mapId"
      doubleClickZoom={false}
      style={{ height: "100vh" }}
      center={[-23.1573924, -45.7908461]}
      zoom={18}
      scrollWheelZoom={true}
      ref={mapRef}
    >

      {polygons.map((polygon, index) => (
        <Polygon key={index } coordinates={polygon.geometry.coordinates} />
      ))}

    </MapContainer>
  )
}

When I click in on polygon it is selected to edit, if a click on another one the vertices start to disappear, like this:

So 2 vertices of Polygon is not appearing.

What should I do to do it right?