diff --git a/packages/drawing-ui/src/views/panel/DrawingTransform.tsx b/packages/drawing-ui/src/views/panel/DrawingTransform.tsx
index ca95f788883..420036a76cc 100644
--- a/packages/drawing-ui/src/views/panel/DrawingTransform.tsx
+++ b/packages/drawing-ui/src/views/panel/DrawingTransform.tsx
@@ -177,64 +177,65 @@ export const DrawingTransform = (props: IDrawingTransformProps) => {
     };
 
     useEffect(() => {
-        const changeStartSub = transformer.changeStart$.subscribe((state) => {
-            changeObs(state);
-        });
-
-        const changingSub = transformer.changing$.subscribe((state) => {
-            changeObs(state);
-        });
-
-        const focusSub = drawingManagerService.focus$.subscribe((drawings) => {
-            if (drawings.length !== 1) {
-                return;
-            }
-
-            const drawingParam = drawingManagerService.getDrawingByParam(drawings[0]);
-
-            if (drawingParam == null) {
-                return;
-            }
-
-            const transform = drawingParam.transform;
-
-            if (transform == null) {
-                return;
-            }
-
-            const {
-                width: originWidth,
-                height: originHeight,
-                left: originX,
-                top: originY,
-                angle: originRotation,
-            } = transform;
-
-            if (originWidth != null) {
-                setWidth(originWidth);
-            }
-
-            if (originHeight != null) {
-                setHeight(originHeight);
-            }
-
-            if (originX != null) {
-                setXPosition(originX);
-            }
-
-            if (originY != null) {
-                setYPosition(originY);
-            }
-
-            if (originRotation != null) {
-                setRotation(originRotation);
-            }
-        });
+        const subscriptions = [
+            transformer.changeStart$.subscribe((state) => {
+                changeObs(state);
+            }),
+            transformer.changing$.subscribe((state) => {
+                changeObs(state);
+            }),
+            transformer.changeEnd$.subscribe((state) => {
+                changeObs(state);
+            }),
+            drawingManagerService.focus$.subscribe((drawings) => {
+                if (drawings.length !== 1) {
+                    return;
+                }
+
+                const drawingParam = drawingManagerService.getDrawingByParam(drawings[0]);
+
+                if (drawingParam == null) {
+                    return;
+                }
+
+                const transform = drawingParam.transform;
+
+                if (transform == null) {
+                    return;
+                }
+
+                const {
+                    width: originWidth,
+                    height: originHeight,
+                    left: originX,
+                    top: originY,
+                    angle: originRotation,
+                } = transform;
+
+                if (originWidth != null) {
+                    setWidth(originWidth);
+                }
+
+                if (originHeight != null) {
+                    setHeight(originHeight);
+                }
+
+                if (originX != null) {
+                    setXPosition(originX);
+                }
+
+                if (originY != null) {
+                    setYPosition(originY);
+                }
+
+                if (originRotation != null) {
+                    setRotation(originRotation);
+                }
+            }),
+        ];
 
         return () => {
-            changingSub.unsubscribe();
-            changeStartSub.unsubscribe();
-            focusSub.unsubscribe();
+            subscriptions.forEach((sub) => sub.unsubscribe());
         };
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);