Best and easy way to capture events in react application for user behaviour analysis.

We are looking to capture all the events(like button clicks and textfield changes) in a react application. The object is to capture all user actions so that further analysis can be done on user behaviour. We don't want to implement google analytics at every component level since the application is very huge and the effort will be more.

So we are capturing events in the root react component using jquery. This provides us the id of that html element responsible for generating the event. Now using this Id we are supposed to identify the react component to which it belongs and the state information present in that react component. Since we deal with table data, when a table cell is edited we get to know that table is edited using jquery, but inorder to derive the cell address (row,column) and other information, we need the local variables stored in that react component.

Hence we are trying to access the react component. Please let me know the efficient way to do this.

I have tried accessing the react fiber using the html id. This process is combersome as the react fiber is a complex structure and all states information might not be present one react fibre example -> if we have 3 nested divs like this.

<div id="div-1">
    // header
    <div id= "div-2">
        <div id="div-3">
             //contains a text field
        </div>
    </div>
</div>

If something is edited in div-3 we capture react fiber associated with it, which might not have all the state information. (react fibre associated with div-1 is most likely to have all data).
Please suggest how this can be done.
Thank you.