Set z-index via CSS

src/container/EdgeRenderer/index.tsx

@@ -73,18 +73,9 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     return null;
   }
 
-  const { connectionLineType, defaultMarkerColor, connectionLineStyle, connectionLineComponent } = props;
+  const { connectionLineType, defaultMarkerColor, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle } = props;
   const renderConnectionLine = connectionNodeId && connectionHandleType;
 
-  let { connectionLineContainerStyle } = props
-  if (connectionLineContainerStyle?.zIndex === undefined) {
-    // if not set already, set the zIndex to the max level of the any edge
-    connectionLineContainerStyle = {
-      ...connectionLineContainerStyle,
-      zIndex: edgeTree.find(({ isMaxLevel }) => isMaxLevel)?.level
-    }
-  }
-
   return (
     <>
       {edgeTree.map(({ level, edges, isMaxLevel }) => (

src/style.css

@@ -36,6 +36,10 @@
   overflow: visible;
 }
 
+.react-flow .react-flow__connectionline {
+  z-index: 1001;
+}
+
 .react-flow__edge {
   pointer-events: visibleStroke;