diff --git a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
index 874989b66..8179feb09 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
@@ -278,11 +278,17 @@ const HandleRenderComponent = memo(function HandleRenderComponent({
     const isNullHandle =
       filterPresent && !(openHandle || ownDraggingHandle || ownFilterHandle);
 
+    // Create a Set from colorName to remove duplicates
+    const colorNameSet = new Set(colorName || []);
+    const uniqueColorCount = colorNameSet.size;
+    const firstUniqueColor =
+      colorName && colorName.length > 0 ? colorName[0] : "";
+
     const handleColorName = connectedEdge
       ? connectedColor
-      : colorName!.length > 1
+      : uniqueColorCount > 1
         ? "secondary-foreground"
-        : "datatype-" + colorName![0];
+        : "datatype-" + firstUniqueColor;
 
     const handleColor = isNullHandle
       ? dark
@@ -290,15 +296,15 @@ const HandleRenderComponent = memo(function HandleRenderComponent({
         : "hsl(var(--accent-gray-foreground)"
       : connectedEdge
         ? "hsl(var(--datatype-" + connectedColor + "))"
-        : colorName!.length > 1
+        : uniqueColorCount > 1
           ? "hsl(var(--secondary-foreground))"
-          : "hsl(var(--datatype-" + colorName![0] + "))";
+          : "hsl(var(--datatype-" + firstUniqueColor + "))";
 
     const accentForegroundColorName = connectedEdge
       ? "hsl(var(--datatype-" + connectedColor + "-foreground))"
-      : colorName!.length > 1
+      : uniqueColorCount > 1
         ? "hsl(var(--input))"
-        : "hsl(var(--datatype-" + colorName![0] + "-foreground))";
+        : "hsl(var(--datatype-" + firstUniqueColor + "-foreground))";
 
     const currentFilter = left
       ? {