diff --git a/packages/react-maplibre/src/components/MlFeatureEditor/MlFeatureEditor.test.js b/packages/react-maplibre/src/components/MlFeatureEditor/MlFeatureEditor.test.js
index 1edce35c..a704d1dd 100644
--- a/packages/react-maplibre/src/components/MlFeatureEditor/MlFeatureEditor.test.js
+++ b/packages/react-maplibre/src/components/MlFeatureEditor/MlFeatureEditor.test.js
@@ -74,7 +74,7 @@ const testAttributes = {
 };
 
 describe('<MlFeatureEditor>', () => {
-	it('should register 2 event listeners to the maplibre instance', async () => {
+	it('should register 3 event listeners to the maplibre instance', async () => {
 		render(
 			<MapComponentsProvider>
 				<MlFeatureEditorTestComponent {...testAttributes} />
@@ -82,10 +82,10 @@ describe('<MlFeatureEditor>', () => {
 		);
 
 		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
-		await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7));
+		await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(8));
 	});
 
-	it('should deregister 2 event listeners to the maplibre instance', async () => {
+	it('should deregister 3 event listeners to the maplibre instance', async () => {
 		render(
 			<MapComponentsProvider>
 				<MlFeatureEditorTestComponent {...testAttributes} />
@@ -93,11 +93,11 @@ describe('<MlFeatureEditor>', () => {
 		);
 
 		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
-		expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7);
+		expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(8);
 
 		await userEvent.click(screen.getByTestId('toggle_layer_visible'));
 
-		expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(3);
+		expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(7);
 	});
 
 	it('should add MapBox-Gl-draw instance using map.addControl to the maplibre instance', async () => {
diff --git a/packages/react-maplibre/src/hooks/useFeatureEditor/useFeatureEditor.tsx b/packages/react-maplibre/src/hooks/useFeatureEditor/useFeatureEditor.tsx
index fcb6a1a5..ae93c671 100644
--- a/packages/react-maplibre/src/hooks/useFeatureEditor/useFeatureEditor.tsx
+++ b/packages/react-maplibre/src/hooks/useFeatureEditor/useFeatureEditor.tsx
@@ -110,14 +110,10 @@ const useFeatureEditor = (props: useFeatureEditorProps) => {
 	}, [mapHook.map, props, drawToolsInitialized, modeChangeHandler]);
 
 	useEffect(() => {
-		if (!mapHook.map || !drawToolsReady) return;
+		if (!mapHook.map || !drawToolsReady || !draw.current) return;
 
 		const changeHandler = (ev: unknown) => {
-			let features: Feature[] = [];
-
-			if (ev && typeof ev === 'object' && 'features' in ev && ev.features) {
-				features = ev.features as Feature[];
-			}
+			const features = (ev as { features: Feature[] })?.features || [];
 
 			setFeature(features);
 
@@ -126,16 +122,18 @@ const useFeatureEditor = (props: useFeatureEditorProps) => {
 			}
 		};
 
-		mapHook.map.on('mouseup', changeHandler);
-		mapHook.map.on('touchend', changeHandler);
+		mapHook.map.on('draw.create' as MapLibreGlEventName, changeHandler, mapHook.componentId);
+		mapHook.map.on('draw.update' as MapLibreGlEventName, changeHandler, mapHook.componentId);
+		mapHook.map.on('draw.delete' as MapLibreGlEventName, changeHandler, mapHook.componentId);
 
 		return () => {
 			if (!mapHook.map) return;
 
-			mapHook.map.map.off('mouseup', changeHandler);
-			mapHook.map.map.off('touchend', changeHandler);
+			mapHook.map.map.off('draw.create', changeHandler);
+			mapHook.map.map.off('draw.update', changeHandler);
+			mapHook.map.map.off('draw.delete', changeHandler);
 		};
-	}, [drawToolsReady, mapHook.map]);
+	}, [drawToolsReady, mapHook.map, props.onChange]);
 
 	useEffect(() => {
 		if (draw.current && props.geojson?.geometry) {