I am beginner in React so I apologize if this is a basic question. I am trying to build an online Sudoku grid using ReactJS but I am unable to render the digits in the field. I have made two components one being the Sudoku.js which renders the complete sudoku block and other being Node.js which consists of an input field wrapped inside a div. the functionality I want is to change the default value of the input field (which is "" in my case) whenever the user types a number. I have tried the below approach. It updates the value of my grid variable but does not show the updated value in the input field of Node. Kindly help.

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>
);

here grid is a 2D array of 9x9 elements which have initial value of all the elements being "" , which are supposed to be updated when the user types in the value in the respective fields. the problem is that the value is updated when the user types the number but the number is not shown in the input field

The Node component is as follows:

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

}