react-xarrows not updating lines in position

Question

There are some issues I'm having while using the react-xarrows with mui.

I'm trying to achieve:

• The line should be connected in the same position after toggling the files (if expanded).
• The line should connect to its parent if the child is not visible.
• Render line after tree setup and update lines on every toggle on any of the sides.

Here is what I tried so far: https://codesandbox.io/s/sharp-wildflower-mit5wp?file=/src/TreeMapView.tsx