Drawing and editing geofence using @react-google-maps/api

Question

const handleOverlayComplete = (event) => {
    if (event.type === 'polygon') {
      const paths = event.overlay.getPath().getArray().map(latLng => ({ lat: latLng.lat(), lng: latLng.lng() }));
      setPolygonPaths([...polygonPaths, paths]);
    }
  };

const polgonChanged = ()=>{
console.log('helloo')
}

 <DrawingManager
        onPolygonComplete={(event) => handleOverlayComplete(event)}
        drawingControlOptions={{
          drawingModes: ['polygon']
        }}
 />
 <Polygon
     paths={polygonPath}
     editable={true}
     draggable={true}
     onDragEnd={polgonChanged}
     onMouseUp={polgonChanged}
  />`

I am getting handleoverlaycomplete function whenever user is trying to complete the geofence. after completion of drawing polygon when trying to edit or drag none of the events are firing. i need to fire onDragEnd when user is trying to drag the shape