diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index e91d65a3e..bf94fa43e 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -62,7 +62,9 @@ export default function ParameterComponent({
 
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
-    reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
+    reactFlowInstance
+      ?.getEdges()
+      .some((e) => e.targetHandle === JSON.stringify(id)) ?? false;
 
   const { data: myData } = useContext(typesContext);
 
@@ -205,7 +207,7 @@ export default function ParameterComponent({
             <Handle
               type={left ? "target" : "source"}
               position={left ? Position.Left : Position.Right}
-              id={id}
+              id={JSON.stringify(id)}
               isValidConnection={(connection) =>
                 isValidConnection(connection, reactFlowInstance)
               }
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index d72e46d23..4e17ce4c7 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -194,14 +194,12 @@ export default function GenericNode({
                         data.node.template[t].type
                       }
                       required={data.node.template[t].required}
-                      id={
-                        (data.node.template[t].input_types?.join(";") ??
-                          data.node.template[t].type) +
-                        "|" +
-                        t +
-                        "|" +
-                        data.id
-                      }
+                      id={{
+                        inputTypes: data.node.template[t].input_types,
+                        type: data.node.template[t].type,
+                        id: data.id,
+                        fieldName: t,
+                      }}
                       left={true}
                       type={data.node.template[t].type}
                       optionalHandle={data.node.template[t].input_types}
@@ -230,7 +228,11 @@ export default function GenericNode({
                   : data.type
               }
               tooltipTitle={data.node.base_classes.join("\n")}
-              id={[data.type, data.id, ...data.node.base_classes].join("|")}
+              id={{
+                baseClasses: data.node.base_classes,
+                id: data.id,
+                dataType: data.type,
+              }}
               type={data.node.base_classes.join("|")}
               left={false}
             />
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 5cf87b8d3..4c1b1c29c 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -2,6 +2,7 @@ import { ReactElement, ReactNode } from "react";
 import { APIClassType } from "../api";
 import { NodeDataType } from "../flow/index";
 import { typesContextType } from "../typesContext";
+import { sourceHandleType, targetHandleType } from "./../flow/index";
 export type InputComponentType = {
   value: string;
   disabled?: boolean;
@@ -29,7 +30,7 @@ export type ParameterComponentType = {
   data: NodeDataType;
   setData: (value: NodeDataType) => void;
   title: string;
-  id: string;
+  id: sourceHandleType | targetHandleType;
   color: string;
   left: boolean;
   type: string;