diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 5493ed12a..bf3629db8 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -1,4 +1,4 @@
-import _, { cloneDeep, set } from "lodash";
+import _, { cloneDeep } from "lodash";
 import { MouseEvent, useCallback, useEffect, useRef, useState } from "react";
 import ReactFlow, {
   Background,
@@ -105,40 +105,42 @@ export default function Page({
       ) {
         event.preventDefault();
         takeSnapshot();
-        if (
-          validateSelection(lastSelection!, edges).length === 0
-        ) {
-          const clonedNodes = cloneDeep(nodes)
-          const clonedEdges = cloneDeep(edges)
-          const clonedSelection = cloneDeep(lastSelection)
-          updateIds({ nodes: clonedNodes, edges: clonedEdges }, clonedSelection!)
+        if (validateSelection(lastSelection!, edges).length === 0) {
+          const clonedNodes = cloneDeep(nodes);
+          const clonedEdges = cloneDeep(edges);
+          const clonedSelection = cloneDeep(lastSelection);
+          updateIds(
+            { nodes: clonedNodes, edges: clonedEdges },
+            clonedSelection!
+          );
           const { newFlow, removedEdges } = generateFlow(
             clonedSelection!,
             clonedNodes,
             clonedEdges,
             getRandomName()
           );
-          const newGroupNode = generateNodeFromFlow(
-            newFlow,
-            getNodeId
-          );
-          const newEdges = reconnectEdges(
+          const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
+          const newEdges = reconnectEdges(newGroupNode, removedEdges);
+          setNodes([
+            ...clonedNodes.filter(
+              (oldNodes) =>
+                !clonedSelection?.nodes.some(
+                  (selectionNode) => selectionNode.id === oldNodes.id
+                )
+            ),
             newGroupNode,
-            removedEdges
-          );
-          setNodes([...clonedNodes.filter(
-            (oldNodes) =>
-              !clonedSelection?.nodes.some(
-                (selectionNode) =>
-                  selectionNode.id === oldNodes.id
-              )), newGroupNode])
-          setEdges([...clonedEdges.filter(
-            (oldEdge) =>
-              !clonedSelection!.nodes.some(
-                (selectionNode) =>
-                  selectionNode.id === oldEdge.target ||
-                  selectionNode.id === oldEdge.source
-              )), ...newEdges])
+          ]);
+          setEdges([
+            ...clonedEdges.filter(
+              (oldEdge) =>
+                !clonedSelection!.nodes.some(
+                  (selectionNode) =>
+                    selectionNode.id === oldEdge.target ||
+                    selectionNode.id === oldEdge.source
+                )
+            ),
+            ...newEdges,
+          ]);
         } else {
           setErrorData({
             title: INVALID_SELECTION_ERROR_ALERT,
@@ -437,7 +439,7 @@ export default function Page({
         <div className="h-full w-full">
           <div className="h-full w-full" ref={reactFlowWrapper}>
             {Object.keys(templates).length > 0 &&
-              Object.keys(types).length > 0 ? (
+            Object.keys(types).length > 0 ? (
               <div id="react-flow-id" className="h-full w-full">
                 <ReactFlow
                   nodes={nodes}
@@ -486,10 +488,13 @@ export default function Page({
                       if (
                         validateSelection(lastSelection!, edges).length === 0
                       ) {
-                        const clonedNodes = cloneDeep(nodes)
-                        const clonedEdges = cloneDeep(edges)
-                        const clonedSelection = cloneDeep(lastSelection)
-                        updateIds({ nodes: clonedNodes, edges: clonedEdges }, clonedSelection!)
+                        const clonedNodes = cloneDeep(nodes);
+                        const clonedEdges = cloneDeep(edges);
+                        const clonedSelection = cloneDeep(lastSelection);
+                        updateIds(
+                          { nodes: clonedNodes, edges: clonedEdges },
+                          clonedSelection!
+                        );
                         const { newFlow, removedEdges } = generateFlow(
                           clonedSelection!,
                           clonedNodes,
@@ -504,19 +509,27 @@ export default function Page({
                           newGroupNode,
                           removedEdges
                         );
-                        setNodes([...clonedNodes.filter(
-                          (oldNodes) =>
-                            !clonedSelection?.nodes.some(
-                              (selectionNode) =>
-                                selectionNode.id === oldNodes.id
-                            )), newGroupNode])
-                        setEdges([...clonedEdges.filter(
-                          (oldEdge) =>
-                            !clonedSelection!.nodes.some(
-                              (selectionNode) =>
-                                selectionNode.id === oldEdge.target ||
-                                selectionNode.id === oldEdge.source
-                            )), ...newEdges])
+                        setNodes([
+                          ...clonedNodes.filter(
+                            (oldNodes) =>
+                              !clonedSelection?.nodes.some(
+                                (selectionNode) =>
+                                  selectionNode.id === oldNodes.id
+                              )
+                          ),
+                          newGroupNode,
+                        ]);
+                        setEdges([
+                          ...clonedEdges.filter(
+                            (oldEdge) =>
+                              !clonedSelection!.nodes.some(
+                                (selectionNode) =>
+                                  selectionNode.id === oldEdge.target ||
+                                  selectionNode.id === oldEdge.source
+                              )
+                          ),
+                          ...newEdges,
+                        ]);
                       } else {
                         setErrorData({
                           title: INVALID_SELECTION_ERROR_ALERT,
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 60fddc932..4b991e829 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -37,10 +37,7 @@ import {
   getNodeId,
   scapeJSONParse,
   scapedJSONStringfy,
-  updateEdgesIds,
   updateGroupRecursion,
-  updateIds,
-  updateProxyIdsOnTemplate,
   validateNodes,
 } from "../utils/reactflowUtils";
 import { getInputsAndOutputs } from "../utils/storeUtils";
@@ -226,10 +223,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     );
   },
   paste: (selection, position) => {
-
-    function updateGroup(){
-
-    }
+    function updateGroup() {}
 
     if (
       selection.nodes.some((node) => node.data.type === "ChatInput") &&
@@ -267,7 +261,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       let newId = getNodeId(node.data.type);
       idsMap[node.id] = newId;
 
-      updateGroupRecursion(node,selection.edges)
+      updateGroupRecursion(node, selection.edges);
 
       // Create a new node object
       const newNode: NodeType = {
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index cba490475..edd48354e 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1274,17 +1274,17 @@ export function isOutputType(type: string): boolean {
   return OUTPUT_TYPES.has(type);
 }
 
-export function updateGroupRecursion(groupNode:NodeType,edges:Edge[]){
-  if(groupNode.data.node?.flow){
-    groupNode.data.node.flow.data!.nodes.forEach((node)=>{
-      if(node.data.node?.flow){
-        updateGroupRecursion(node,node.data.node.flow.data!.edges);
+export function updateGroupRecursion(groupNode: NodeType, edges: Edge[]) {
+  if (groupNode.data.node?.flow) {
+    groupNode.data.node.flow.data!.nodes.forEach((node) => {
+      if (node.data.node?.flow) {
+        updateGroupRecursion(node, node.data.node.flow.data!.edges);
       }
-    })
+    });
     let newFlow = groupNode.data.node!.flow;
     const idsMap = updateIds(newFlow.data!);
     updateProxyIdsOnTemplate(groupNode.data.node!.template, idsMap);
     let flowEdges = edges;
     updateEdgesIds(flowEdges, idsMap);
   }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 3bb621808..8732ed3d1 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -707,6 +707,6 @@ export function sortFields(a, b, fieldOrder) {
 }
 
 export function freezeObject(obj: any) {
-  if(!obj) return obj;
-  return(JSON.parse(JSON.stringify(obj)));
-}
\ No newline at end of file
+  if (!obj) return obj;
+  return JSON.parse(JSON.stringify(obj));
+}