How to display and manipulate data of multiple Ag-Grids in React-Redux-Tabs in React.js

Question

I am new to react- Ag-Grid and I want to display and manipulate multiple Ag-Grid in react tabs for displaying grids in tabs.

I am using react-tabs-redux. Please refer to below url for it.

https://www.npmjs.com/package/react-tabs-redux

https://www.ag-grid.com/

I am getting multiple Ag-Grid in tabs. But when I am doing some operation on the grid then it is performed at last tab grid only, I want the grid data in the tab in which I am doing the operation ( like add, delete, update the row and etc.. ) it should reflect the changes for the same grid in which current active tab only.

in Javascript, we can display multiple Ag-grid in tabs and manipulate also. by keeping separate gridOptions for every grid like gridOptionsOne , gridOptionsTwo

But React js in React-Ag-Grid the grid in Component

I am using the AgGridReact component in the loop for displaying grid in tabs

in onGridReady function how to get for each grid inside tab how to get different gridApi & gridColumnApi for Ag-Grid Operations

  onGridReady(params) {
            this.gridApi = params.api;
            this.gridColumnApi = params.columnApi;

        }


<AgGridReact
      columnDefs={this.state.columnDefs}
      rowData={this.state.rowData}                                                               
      onGridReady={this.onGridReady.bind(this)}                                                                
     enterMovesDownAfterEdit={true}                                                                
     enterMovesDown={true}                                                                        
 />

Thanks in Advance