Soy principiante en React, así que me disculpo si esta es una pregunta básica. Estoy tratando de construir una cuadrícula de Sudoku en línea usando ReactJS pero no puedo representar los dígitos en el campo. He creado dos componentes, uno Sudoku.js que representa el bloque sudoku completo y otro Node.js que consiste en un campo de entrada envuelto dentro de un div. la funcionalidad que quiero es cambiar el valor predeterminado del campo de entrada (que es "" en mi caso) cada vez que el usuario escribe un número. He intentado el siguiente enfoque. Actualiza el valor de mi variable de cuadrícula pero no muestra el valor actualizado en el campo de entrada de Node . Amablemente ayuda

Sudoku.js

 const sudokugrid = ( <div> {grid.map((row,rowIdx) => { return ( <div key = {rowIdx} className="rowWrapper"> {row.map((col,colIdx) => { var element = grid[rowIdx][colIdx].value; const change = (event) => { element = event.target.value; grid[rowIdx][colIdx].value = element; setGrid(grid); return element; } return ( <Node key = {colIdx} onChangeValue = {change} value = {element} /> ) })} </div> ) })} </div> );

aquí la cuadrícula es una matriz 2D de elementos de 9x9 que tienen el valor inicial de todos los elementos como "", que se supone que se actualiza cuando el usuario ingresa el valor en los campos respectivos. el problema es que el valor se actualiza cuando el usuario escribe el número pero el número no se muestra en el campo de entrada

El componente Nodo es el siguiente:

 function Node(props){ return ( <div className="box"> <input className = "num" type="number" value = {props.value} onChange = {props.onChangeValue} /> </div> )

}