React, Component that edits the HTML of the next component?

Question

I have a strange case. I must use a table library that has few features. There is no way to use react-table or more popular libraries.

I need the following feature => In the first column there are icons. If someone clicks on this icon, a new <tr><td>xyz</td></tr> should appear straight after this row.

It's a sort of tooltip, but instead of appearing on top of other content it should "add itself" between the row it has been triggered from and the next row.

I have no idea how to approach that.

The only things I have access to is the row index of the row the model was triggered from.

Is it feasible in React to create a component that somehow pushes a <tr> after the current td closes?

I am wondering if in react it's possible to manipulate HTML in a similar way, no matter if it is a bad practice...

Or maybe somehow running plain JavaScript is the only solution?

Any idea that helps me find a solution would be much appreciated.