Nodes jump around when new nodes/edges are added dynamically

[steppy452]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

The layout of the flow chart changes if new nodes are added dynamically (on click) - this seems to happen only if ports are used though. The newly added nodes/edges get moved to the bottom (if using RIGHT direction layout) instead of just expanding out.

Expected behavior

I would expect the ordering of the nodes to stay the same and new nodes/edges to expand out from where the originating node is.

Minimal reproduction of the problem with instructions

Here's a video demonstrating the issue
https://github.com/reaviz/reaflow/assets/1513140/17ce1b68-10b3-41f9-b730-21fab95a465c

I've also added a new story in a branch reaflow-222/layout-bug that shows this happening

What is the motivation / use case for changing the behavior?

To prevent the chart from jumping around and confusing users.

Environment

Libs:
- react version: X.Y.Z
- realayers version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others: