Estoy tratando de crear una tabla dinámica de una aplicación de sudoku en la que estoy trabajando, pero no puedo ver por qué este código no funcionaría. mi aplicación base pasa un enlace de referencia y envía la matriz de 9x9 al componente Grid

 return( <Grid arr={sudokuBoard.current.board} /> )

Luego, en mi aplicación de cuadrícula, hace una llamada a RowComponent usando la función array.map

 export default function Grid(props){ let sudokuArray = props.arr; return( <table> {sudokuArray.map((row, ind)=> { <RowComponent setkey={ind} rowval={row} /> }) } </table> ) }

Que luego llama a una función de generación de tablecell

 export default function RowComponent(props){ return( <tr key={props.setkey}> {props.rowval.map((item,ind) => { <TableItem keyval={item} value={item}/> })} </tr> ) }

Y el componente generador de celdas de la tabla se ve así

 export default function TableItem(props){ let tableValue = props.value console.log(tableValue) return( <td>{props.value}</td> ) }

¿Algún consejo sobre lo que podría estar saliendo mal? La matriz se pasa a Grid muy bien, pero es en las llamadas encadenadas donde las cosas dejan de funcionar.

Gracias