diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 4e17ce4c7..b476f7458 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -165,14 +165,12 @@ export default function GenericNode({
                   {data.node.template[t].show &&
                   !data.node.template[t].advanced ? (
                     <ParameterComponent
-                      key={
-                        (data.node.template[t].input_types?.join(";") ??
-                          data.node.template[t].type) +
-                        "|" +
-                        t +
-                        "|" +
-                        data.id
-                      }
+                      key={JSON.stringify({
+                        inputTypes: data.node.template[t].input_types,
+                        type: data.node.template[t].type,
+                        id: data.id,
+                        fieldName: t,
+                      })}
                       data={data}
                       setData={setData}
                       color={
@@ -218,7 +216,11 @@ export default function GenericNode({
               {" "}
             </div>
             <ParameterComponent
-              key={[data.type, data.id, ...data.node.base_classes].join("|")}
+              key={JSON.stringify({
+                baseClasses: data.node.base_classes,
+                id: data.id,
+                dataType: data.type,
+              })}
               data={data}
               setData={setData}
               color={nodeColors[types[data.type]] ?? nodeColors.unknown}
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index ac9aa1d01..f2dde4e4b 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -25,7 +25,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { APIClassType } from "../../../../types/api";
-import { FlowType, NodeType } from "../../../../types/flow";
+import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
 import { isValidConnection } from "../../../../utils/reactflowUtils";
 import { isWrappedWithClass } from "../../../../utils/utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
@@ -185,10 +185,13 @@ export default function Page({ flow }: { flow: FlowType }) {
             ...params,
             style: { stroke: "#555" },
             className:
-              (params.targetHandle.split("|")[0] === "Text"
+              ((JSON.parse(params.targetHandle) as targetHandleType).type ===
+              "Text"
                 ? "stroke-foreground "
                 : "stroke-foreground ") + " stroke-connection",
-            animated: params.targetHandle.split("|")[0] === "Text",
+            animated:
+              (JSON.parse(params.targetHandle) as targetHandleType).type ===
+              "Text",
           },
           eds
         )