React井字棋自动生成Square组件状态异常问题求助

我在学习ReactJS，跟着官方井字棋教程完成第二个挑战（用循环替代硬编码生成Square组件）时遇到了异常：

• 手动硬编码9个Square组件时功能正常：首次点击任意方块，仅该方块的UI会变为'X'
• 使用Array.map自动生成组件后，虽能正常渲染9个方块，但首次点击任意方块时，所有自动生成的方块都会变为'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>
          )
        })
    )
  }

已做的排查工作：

• 确认squareIndex可正确生成0-8的连续数值
• 自动生成代码与手动生成代码位于同一Board组件内，手动生成的方块功能依旧正常
• 尝试过将map替换为for循环、减少循环嵌套层数、多次确认索引逻辑正确性、将映射结果存入常量等方法，问题均未解决

问题截图：

内容的提问来源于stack exchange，提问作者Dulcis Evander