I am struggling with the hooks and how can i pass the value from one component to another. I have a component called table.js from which i am trying to pass the table cell clicked value to Grid.js. The variable is peerData . I am able to print it on console but can't render it in grid, also not able to use the ag grid api call and getting undefined. Can someone please help me, i am very new to javascript world.

Grid.js :

import ..
   
    const { selectedCompany, peerData } = React.useContext(Context);
    
    
    React.useEffect(() => {
      console.log({peerData})
    }, [peerData]);
    
    
    
    console.log('Checking Context..');
    console.log(selectedCompany);
    console.log({'peerdata detail':peerData});
    
    
    const columnDefs = [
      {
        id: 'currency',
        field: 'currency',
        headerName: 'currency',
      },
      {
        id: 'Cash',
        field: 'Cash',
        headerName: 'Cash',
        width : 200,
        resizable : true,
      },
    ];
    
    
    
    const getPeerData = (rows) => {
      let company = rows;
      console.log('Peer Company Name:')
      console.log(company)
      return company;
    };
    
    const gridOptionsPeers = {
      columnDefs : columnDefs,
      rowData : getPeerData(peerData),
      rowSelection : 'multiple'
    };
    
    
    
    export default function PeerDetails(props) {
    
    
      const { selectCompany } = React.useContext(Context);
    
      function onSelectionChanged() {
        console.log({'Printing Peer Grid':gridOptionsPeers})
        var selectedRows = gridOptionsPeers.api.getSelectedRows();
        if (selectedRows.length == 1) {
          const fsymId = selectedRows[0].currency;
          selectCompany(id);
          console.log({'These rows Selected' : id})
        }
        else {
          console.log('No row selected');
        }
      }
      return (
        <Card>
          <CardHeader><h4>Peers</h4>
          </CardHeader>
          <CardBody>
            <Row style={{ height: '450px' }}>
              {/* {  <Col w='' style={{ width: w, minWidth: w, maxWidth: w }}>
                {<PeersChart />}
              </Col>} */}
              <Col>
                <Grid
                  columnDefs={columnDefs}
                  style={{ width: '100%', height: '100%' }}
                  containerStyle={{ width: '100%', height: '100%' }}
                  tooltipShowDelay={0}
                  onSelectionChanged={onSelectionChanged}
                  gridOptions={gridOptionsPeers}
                />
              </Col>
            </Row>
          </CardBody>
        </Card>
      );
    };