How to update deeply nested state in react?

Question

I'm creating a sudoku board which renders JSX div objects in a grid like this.

newBoard.push(<div className={letnum} key={letcol} id={letcol} 
        onClick={() => this.handleTileClick(event)}>
        {response.data[i][j]}
        </div>

newBoard is then added to state, however when I click on a tile to change the innerHTML to a new number, I also want to update state at the same time. I get the error:

Cannot assign to read only property 'children' of object '#<Object>'

and I need to update:

this.state.board[index].props.children

to be a new number. Any advice on how to do this? I've been at it for hours haha. Here is the total code.

 axios.get("http://127.0.0.1:5000/new-board")
            .then(response => {
                console.log("API Response: ", response)
                for (let i = 0; i < 9; i++) {
                    let letter = String.fromCharCode(97 + i)
                    for (let j = 0; j < 9; j++) {
                        let column = j + 1;
                        let number = dictionary[j + 1];
                        let letnum = letter + " " + number + " tile";
                        let letcol = letter + column;
                        newBoard.push(<div 
                            className={letnum} 
                            key={letcol} 
                            id={letcol} 
                            onClick={() => this.handleTileClick(event)}>
                            {response.data[i][j]}
                            </div>)
                    }
                }
                this.setState({
                    board: newBoard,
                    winningBoard: newBoard,
                    gameWon: false
                })
            })


handleNumberChoiceClick(event) {
        this.setState({
            activeNumberSelector: Number(event.target.innerHTML)
        })
    }


    handleTileClick(event) {
        const selectedTile = event.target;
        selectedTile.innerHTML = this.state.activeNumberSelector;
        const location = this.state.board.indexOf((this.state.board.find(tile=>tile.props.id === selectedTile.id)));


        this.setState({
            activeNumberSelector: ''
        })
        console.log(this.state.board[location].props.children)
    }

Answer 1

Simply: You shouldn't put React elements in state.

Only keep the data you need to render those elements in state (and props), and return those elements in your render function.