The position of arrows is moved down unexpectedly when new node added to the list of nodes

[nathantqn]

Describe the bug & Expected behavior
When I add new item to a vertical list of items, the position of arrow is moved down unexpectedly. I also tried to use the useArrows hook to call the updateArrow function to make it recalculate but it doesn't work.

To Reproduce
Here is an example I created on Codesandbox: https://codesandbox.io/s/react-xarrows-bug-qbhniy?file=/src/examplesFiles/Example4.jsx.

You can see when I click on the Add More button, the arrow keeps going down although the position of hello-1 and hello-2 components are not changed.

I tried to change the vertical list to horizontal list and the issue will be disappeared. But currently I need to handle the vertical list so could you please help me to check, thank you!

Screenshots

[harishv7]

Hi, I am facing a similar issue where the arrows are not rendering properly. Essentially, the arrows are misplaced, moved down whenever a new node is added.

However, when I scroll the page, the arrows are re-rendered correctly. Could you please help check the issue of re-rendering the arrows. I am not sure if it is rendering at the same time React is rendering the components or something like that. I have already tried calling the updateArrows hook under useEffect, but it doesn't help.

Appreciate your help on this please!