diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index bf3629db8..441c3f051 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -94,6 +94,52 @@ export default function Page({
   const [lastSelection, setLastSelection] =
     useState<OnSelectionChangeParams | null>(null);
 
+  function handleGroupNode() {
+    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!
+      );
+      const { newFlow, removedEdges } = generateFlow(
+        clonedSelection!,
+        clonedNodes,
+        clonedEdges,
+        getRandomName()
+      );
+      const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
+      const newEdges = reconnectEdges(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,
+      ]);
+    } else {
+      setErrorData({
+        title: INVALID_SELECTION_ERROR_ALERT,
+        list: validateSelection(lastSelection!, edges),
+      });
+    }
+  }
+
   const setNode = useFlowStore((state) => state.setNode);
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
@@ -104,49 +150,7 @@ export default function Page({
         event.key === "g"
       ) {
         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!
-          );
-          const { newFlow, removedEdges } = generateFlow(
-            clonedSelection!,
-            clonedNodes,
-            clonedEdges,
-            getRandomName()
-          );
-          const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
-          const newEdges = reconnectEdges(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,
-          ]);
-        } else {
-          setErrorData({
-            title: INVALID_SELECTION_ERROR_ALERT,
-            list: validateSelection(lastSelection!, edges),
-          });
-        }
+        handleGroupNode();
       }
       if (
         (event.ctrlKey || event.metaKey) &&
@@ -484,58 +488,7 @@ export default function Page({
                     isVisible={selectionMenuVisible}
                     nodes={lastSelection?.nodes}
                     onClick={() => {
-                      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!
-                        );
-                        const { newFlow, removedEdges } = generateFlow(
-                          clonedSelection!,
-                          clonedNodes,
-                          clonedEdges,
-                          getRandomName()
-                        );
-                        const newGroupNode = generateNodeFromFlow(
-                          newFlow,
-                          getNodeId
-                        );
-                        const newEdges = reconnectEdges(
-                          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,
-                        ]);
-                      } else {
-                        setErrorData({
-                          title: INVALID_SELECTION_ERROR_ALERT,
-                          list: validateSelection(lastSelection!, edges),
-                        });
-                      }
+                      handleGroupNode()
                     }}
                   />
                 </ReactFlow>