Without a click event, determine element id or simulate a click event on a material ui button base and populate it with a character

I am writing a modified TicTacToe game where the user has to enter a correct response before their selected square receives an "O" or "X". I have this working fine with two live players on the same computer. When I add the ability for one player to play against an automated response I am having trouble placing the "X". I can calculate the best square(row and column) to place the, "X", but am having trouble displaying it on the board. Below is the code that displays the buttons. The board layout can be a square of any number between 3 and 10.

I track the coordinates (data-coord) of each square but do not know how to use the row and column to place a square in the button group. I do not have a click event for the automated user but if there was a way to simulate the click event at the selected location then I could place the "X" similar to how the live user's selection is updated. Can you please provide any suggestions for doing this?

const boardgui =  board.map((row, rowId) => { 
            const columns = row.map((column, columnId) => (
    
                <Grid key={columnId} item>
                    <ButtonBase > 
                        <Paper
                            onClick={(e) => {
                                clickSquareHandler(e);
                                }}
                            elevation={4}
                            data-coord={rowId + ':' + columnId}
                            className={classes.Paper}>
                            <Icon
                                className={classes.Icon}
                                style={{fontSize: 78}}>
                            </Icon>
                        </Paper>
                    </ButtonBase>
                </Grid>
                ));
                return (
                <Grid
                    key={rowId}
                    className={classes.Grid}
                    container
                    spacing={2}>
                    {columns}

                </Grid>)
           })

My son was able to resolve this for me. Two steps.

1. Added the following line right below the data-coord in the jsx.

id={"Square" + rowId.toString() + columnId.toString()}

2. Added the following code to update the square. Note that the location of the selected square to be updated was determined with another algorithm. One of my problems was that I thought I needed to simulate a click but turned out not to be the case. I just needed to get the element by id, get the child property and then assign an "X" (ie 'close') to the innerHTML.

        let x = selectSquare.x;
        let y = selectSquare.y;
        let squareId = "Square" + x.toString() +  y.toString();
        console.log ("Board - automaticMover - squareId = ", squareId)
        let squareElement = document.getElementById(squareId);
        console.log ("Board - automaticMover - doc = ", squareElement)
        let target = squareElement;
        console.log ("Board - automaticMover - target = ", target)
        let parent =  squareElement.parentElement;
        console.log ("Board - automaticMover - parent = ", parent)
        let child =  squareElement.children[0];
        console.log ("Board - automaticMover - child = ", child)
        board[x][y] = 'X'
        child.innerHTML = 'close';