Connecting from a Position.Left to a Position.Right Handle creates an unexpected Edge shape

Context

Setup uses:

• a canvas with connectionMode={ConnectionMode.Loose}
• custom nodes with Handles on each side, all set as type="source"
• custom edges using a smooth step path

Observed behaviour

When connecting top -> bottom, left -> right or bottom -> top edges are drawn as expected with arrows pointing to the destination node.

When connecting from left to right, the edge shape starts and ends parallel to the node edge and leaves the arrow head pointing perpendicular to the destination node

Expected behaviour

The path should connect to the node at 90deg, similarly to how it does in other directions

Minimal reproduction environment

https://codesandbox.io/s/falling-frost-i767n

Minimal reproduction code in case Codesandbox is deleted

import * as React from "react";
import ReactFlow, {
  ReactFlowProvider,
  ConnectionMode,
  Background,
  addEdge,
  getMarkerEnd,
  ArrowHeadType,
  getSmoothStepPath,
  Position,
  Handle
} from "react-flow-renderer";

//-------------- custom edge --------------

export function CustomEdge({ id, ...props }) {
  const edgePath = getSmoothStepPath({ ...props });
  const markerEnd = getMarkerEnd(ArrowHeadType.ArrowClosed);

  return (
    <path
      id={id}
      d={edgePath}
      markerEnd={markerEnd}
      fill="none"
      stroke="black"
    />
  );
}

// -------------- / --------------

// -------------- custom node --------------

export function CustomNode({ ...props }) {
  return (
    <div
      {...props}
      style={{ width: "200px", height: "100px", border: "1px solid black" }}
    >
      <Handle id="1" type="source" position={Position.Left} />
      <Handle id="2" type="source" position={Position.Top} />
      <Handle id="3" type="source" position={Position.Right} />
      <Handle id="4" type="source" position={Position.Bottom} />
    </div>
  );
}

// -------------- / --------------

export default function App() {
  const edgeTypes = {
    editable: CustomEdge
  };

  const nodeTypes = {
    custom: CustomNode
  };

  const [elements, setElements] = React.useState([
    { id: "1", position: { x: 100, y: 200 }, data: {}, type: "custom" },
    { id: "2", position: { x: 400, y: 300 }, data: {}, type: "custom" },
    { id: "3", position: { x: 700, y: 400 }, data: {}, type: "custom" },
    { id: "4", position: { x: 1000, y: 500 }, data: {}, type: "custom" }
  ]);

  const onConnect = (edge) =>
    setElements((els) => addEdge({ ...edge, type: "editable" }, els));

  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <ReactFlowProvider>
        <ReactFlow
          nodesConnectable
          edgeTypes={edgeTypes}
          nodeTypes={nodeTypes}
          connectionMode={ConnectionMode.Loose}
          elements={elements}
          onConnect={onConnect}
        >
          <Background />
        </ReactFlow>
      </ReactFlowProvider>
    </div>
  );
}

[Vazerthon]

Edit: This behaviour happens when connecting from a Position.Left to a Position.Right Handle, not the other way round as I originally wrote

[Vazerthon]

Thank you so much for the fast turnaround @moklick! Amazing work!