Creating connectors between divs which update frequently in reactjs

I am looking for a solution which would allow me to create connector lines between divs (based on some logic - creating a visual of tree data and having every child be connected to its parent).

I am finding that my current solution has very poor performance.. It is hard to work with and feels too complicated for what it achieves.

The flow is structured in two parts:

  • FIRST) a component generates and places all of the divs on the DOM based on some logic, user input, window resizing, etc...
  • SECOND) a component responsible for the connectors waits for the first component to be mounted on the DOM in order to query based on div IDs and calculate+mount the connectors.

I have managed to make this work seamlessly while I was using no animation but once I introduced transitions (using react-flip-toolkit) to my divs the structure became very restrictive. I currently wait for the transition to finish before mounting the connectors.

I am aware of animation libraries like GSAP which could give me the tools necessary but am wondering if there is a more lightweight approach (potentially in plain js).

P.S. This is my first time asking a question on stackoverflow, I apologize if the format/question is not appropriate