How to prevent edge and node intersection in react-flow?

Question

I need an edge type that does not intersect with a node. I use the source node and target node handles vertically as a business rule. When I connect one node's bottom handle that is below the other node to another node up handle, the edge intersects with both two nodes. This makes it difficult to understand the workflow.

What I expected is that the edges should not intersect with both nodes. It should go around. At the same the, the connection with other nodes that are not directly above the node should be bezier like in the below code.

My edge code:

import {BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath} from 'reactflow'

import './styles.scss'
import {useDispatch} from 'react-redux'
import {setSelectedWorkflowItem} from '../../../../redux/slices/WorkflowReducer'

function CustomEdges(props) {
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    style = {},
    markerEnd,
    data,
    selected,
  }: EdgeProps = props
  const dispacth = useDispatch()
  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  })

  const onEdgeClick = (evt, id) => {
    evt.stopPropagation()
    dispacth(setSelectedWorkflowItem({item: props}))
  }
  
  const styleProps = data.isDefault
    ? {...style, strokeWidth: 3}
    : data.selected
    ? {...style, strokeWidth: 2}
    : {...style, strokeWidth: 1.5}

  return (
    <>
      <BaseEdge path={edgePath} markerEnd={markerEnd} style={styleProps} />
      <EdgeLabelRenderer>
        <div
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
            fontSize: 12,
            // everything inside EdgeLabelRenderer has no pointer events by default
            // if you have an interactive element, set pointer-events: all
            pointerEvents: 'all',
          }}
          className='nodrag nopan'
        >
          <button
            className={`edgebutton background-workflow ${
              data.selected && 'background-workflow-active'
            }`}
            onClick={(event) => onEdgeClick(event, id)}
          >
            {data?.displayName}
          </button>
        </div>
      </EdgeLabelRenderer>
    </>
  )
}

export default CustomEdges

You can check the github issue that has detailed images: https://github.com/wbkd/react-flow/issues/3341