отображать значение компонента React для другого компонента

Question

Я застрял, пытаясь отобразить внутри компонента значение ссылок, содержащихся в другом компоненте, а именно в таблице. По сути, таблица отображается правильно, и я могу console.log значение ссылки из функции внутри компонента таблицы. Я думал, что мог бы запустить функцию внутри компонента таблицы, которая выглядит так (называется test2):

import React, {useState, useEffect, useContext}from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import "../../components/test.css"
import {SidePanel} from './SidePanel'

const useStyles = makeStyles({
    table: {
      minWidth: 0,
    },
  });

const SimpleTable = ({props,posty,order,func,t})=> {

 const test2 = (e)=> {
let b= e.target.name;

 return( 

<SidePanel  setAction={props.setAction} number={posty.number} handleChange={order} values={props} name={b}/>
)
    } 
   let rows= [] ;
   let result=[];
      for (let e in props.field){
        rows.push(props.field[e]);
        }
        for (let e in posty){
            result.push(posty[e]);
            }
       
    const classes = useStyles();
    return (
      <TableContainer component={Paper}>
        <Table className="tableMail" aria-label="simple table">
          <TableHead>
            <TableRow>
              {rows.map((row,index)=>(<TableCell key={index} align="center" className="tableMailth" id={row}><a onClick={()=>order(row)}>{row}</a></TableCell>))}
            </TableRow>
          </TableHead>
          <TableBody>
            {result.map((r, index) => (
              <TableRow key={index}>
                  {r.map((v,index2) => (
                <TableCell key={100+index2} scope="row" >
                 <a  href="#" onClick={(e)=>test2(e)} name={v.toString()}>{v.toString()}</a> 
                  </TableCell>))}
                
              </TableRow>
                  ))}
          </TableBody>
        </Table>
      </TableContainer>
    );
  }

  export default SimpleTable

компонент SidePanel не будет отображаться из SimpleTable, и я не знаю, как решить эту проблему. Спасибо.