react-d3-tree | React component to create interactive D3 tree graphs | Data Visualization library

I'm following the tutorial here but when running their example code for importing a csv file I get an error. I have attached the error report below as well as my full code (taken from their example). I saw in another thread that the constructor in react needs to be in a class so I tried to put it in a class but then I just get a different error.

Error with out class:

I'm currently trying to change a class component (working) into a functional component (not working). Basically, my goal is to make the element centered at the page.

EDIT: If anyone can comment what ref={tc=>(this.treeContainer=tc)} does, it will be extremely helpful too!

My class component (that works):

I am looking for some diagram that able to create some simple diagram like this: that left side can be n lines(structure like test + moscow) and all connect to singe point and same for right side can be n lines that starts for single points and structure can be as left side . Also it will be nice to have some menu when click on node. I tried some graph like Highcharts / react-d3-tree but didnt find any way to make its possible

I am currently having problems using my data in react-d3-tree. The data coming from the server is not compatible with the format that react-d3-tree accepts.

I was told that doing the process using a foreach function for every item will work, but I think that will be really slow, especially whe the data is too big.

The data (as shown in my console) right now is like this:

I've scoured other answers, this one coming the closest to what I'm dealing with.

But my issue remains. I cannot access the properties of a synthetic event. Like shiftKey

For some context, I'm using an onClick handler that comes packaged with react-d3-tree library

I thought it was just this library causing problems. But in the click handler I am able to print the event to the console, and I can see the shiftKey parameter is set as expected. But every time I try to access event.shiftKey I get the error:

index.js:1452 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `shiftKey` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

See my code sample.