diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9cdc2258814..a7933f47bdda 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Empty frames navigation (<https://github.com/openvinotoolkit/cvat/pull/2505>)
 - Disabled position editing in AAM (<https://github.com/openvinotoolkit/cvat/pull/2506>)
 - TypeError: Cannot read property 'toString' of undefined (<https://github.com/openvinotoolkit/cvat/pull/2517>)
+- Extra shapes are drawn after Esc, or G pressed while drawing a region in grouping (<https://github.com/openvinotoolkit/cvat/pull/2507>)
 
 ### Security
 
diff --git a/cvat-canvas/src/typescript/groupHandler.ts b/cvat-canvas/src/typescript/groupHandler.ts
index 84f840cf66c7..c94b5cbf150f 100644
--- a/cvat-canvas/src/typescript/groupHandler.ts
+++ b/cvat-canvas/src/typescript/groupHandler.ts
@@ -35,11 +35,11 @@ export class GroupHandlerImpl implements GroupHandler {
     private getSelectionBox(
         event: MouseEvent,
     ): {
-        xtl: number;
-        ytl: number;
-        xbr: number;
-        ybr: number;
-    } {
+            xtl: number;
+            ytl: number;
+            xbr: number;
+            ybr: number;
+        } {
         const point = translateToSVG((this.canvas.node as any) as SVGSVGElement, [event.clientX, event.clientY]);
         const stopSelectionPoint = {
             x: point[0],
@@ -96,11 +96,11 @@ export class GroupHandlerImpl implements GroupHandler {
                 const bbox = shape.bbox();
                 const clientID = shape.attr('clientID');
                 if (
-                    bbox.x > box.xtl &&
-                    bbox.y > box.ytl &&
-                    bbox.x + bbox.width < box.xbr &&
-                    bbox.y + bbox.height < box.ybr &&
-                    !(clientID in this.highlightedShapes)
+                    bbox.x > box.xtl
+                    && bbox.y > box.ytl
+                    && bbox.x + bbox.width < box.xbr
+                    && bbox.y + bbox.height < box.ybr
+                    && !(clientID in this.highlightedShapes)
                 ) {
                     const objectState = this.getStates().filter(
                         (state: any): boolean => state.clientID === clientID,
@@ -124,7 +124,6 @@ export class GroupHandlerImpl implements GroupHandler {
 
         this.resetSelectedObjects();
         this.initialized = false;
-        this.selectionRect = null;
         this.startSelectionPoint = {
             x: null,
             y: null,
@@ -213,6 +212,10 @@ export class GroupHandlerImpl implements GroupHandler {
         }
         this.statesToBeGroupped = [];
         this.highlightedShapes = {};
+        if (this.selectionRect) {
+            this.selectionRect.remove();
+            this.selectionRect = null;
+        }
     }
 
     public cancel(): void {