Estoy luchando con los ganchos y cómo puedo pasar el valor de un componente a otro. Tengo un componente llamado table.js desde el cual estoy tratando de pasar el valor de clic de la celda de la tabla a Grid.js. La variable es peerData . Puedo imprimirlo en la consola, pero no puedo renderizarlo en la cuadrícula, tampoco puedo usar la llamada API de la cuadrícula Ag y no estoy definido. ¿Puede alguien ayudarme, soy muy nuevo en el mundo de JavaScript?

Cuadrícula.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> ); };