Simple Tic-Tac-Toe ReactJS, Generating Component Messing the State

tic-tac-toe game:

X | O | O | X | X | O | X 

I try to learn ReactJS. I already follow tutorial from https://react.dev/learn/tutorial-tic-tac-toe. But had a hard time to solve the 2nd Challenge of the tutorial.

This is a Square Component:

function Square({ value, onSquareClick }) { return ( <button className="square" onClick={onSquareClick}> {value} </button> ); } 

So, we have main board of the tic-tac-toe which generated manually. It contains of 9 Square components.

<> <div className="board-row"> <Square value={squares[0]} onSquareClick={() => handleClick(0)} /> <Square value={squares[1]} onSquareClick={() => handleClick(1)} /> <Square value={squares[2]} onSquareClick={() => handleClick(2)} /> </div> <div className="board-row"> <Square value={squares[3]} onSquareClick={() => handleClick(3)} /> <Square value={squares[4]} onSquareClick={() => handleClick(4)} /> <Square value={squares[5]} onSquareClick={() => handleClick(5)} /> </div> <div className="board-row"> <Square value={squares[6]} onSquareClick={() => handleClick(6)} /> <Square value={squares[7]} onSquareClick={() => handleClick(7)} /> <Square value={squares[8]} onSquareClick={() => handleClick(8)} /> </div> </> </> 

It works great, the expected behavior is: when I click one of the squares for the first time, the clicked square user interface is changed into 'X'. It works when the board generated manually.

The issue comes in 2nd challenge, when the square components are generated automatically.

I use Array.Map and the UI of 9 squares are successfully generated. But, when I click one of the square for the first time, all the squares that automatically generated changed into 'X'.

function generateSquare(dimension) { let dimensionTranslate = [...Array(dimension).keys()]; return( dimensionTranslate.map((row) => { return(<div className="board-row"> { dimensionTranslate.map((column) => { let squareIndex = (dimension*row)-row + column; return <Square key={squareIndex} value={squares[{ squareIndex }]} onSquareClick={() => handleClick({ squareIndex })} /> }) } </div> ) }) ) } 

Please see the picture of the Problem

PS:

1. The square Index generating correct value :0,1,2,3,4,5,6,7,8.
2. This code (Generating Square Components Automatically) is in the same code-block/same function/same Component(Board Component, parent of Square Component) where I generate 9 square Components Manually

Meanwhile, despite of the error in automatic generated, the manual generated Square still working like usual.

I already working on this for almost 2 days, but I couldn't found the root cause of the issue.

I already tried following things :

1. Change the map into for loop (Doesn't work)
2. Reduce the looping of .Map Function, currently it has 2 loop for making new row in user interface, I make only 1 line ,1.map function, I thought the reason is because of multiple map. (Doesn't work, the behavior still the same.)
3. Make sure the Squareindex is correctly assigned (It is assigned correctly, Doesn't work, the behavior still the same.)
4. Put the the Mapping result in Const variable instead of a function with a return (Doesn't work, the behavior still the same.)

Please check the sandbox here: https://codesandbox.io/p/sandbox/tic-tac-toe-tutorial-mpvcr7