We created a custom edge in react flow where the arrow needs to be a block edge
We used 2 smooth edge step by calling getSmoothStepPath
twice, the edge was drawn properly, till we started to move the node around. Once react-flow starts to bend the edge after a certain point, the center part of the edge was drawn overlapping each other.
Attaching a gif to demonstrate the issue.
How can I implement this kind of block edge in the latest react-flow version 11
GIF of the issue
Tried to replace the center value in the path returned by getSmoothStepPath
Expected the 2 edges to maintain their distances and gaps as they did when they were rendered normally