您将值传递给map函数中的每一个正方形，对于解决方案，您可以将value状态和setSquareValue函数移动到正方形组件，以便每个正方形本身都有自己的值。

更新的Square.js：

import React from "react";
import "./Square.css";

const Square = () => {
const [value, setValue] = useState(null);
  const setSquareValue = () => {
    setValue("X")
  }
  return (
    <div className="square" onClick={setSquareValue}>
      {value}
    </div>
  );
};

export default Square;

你也不再需要把value和setSquareValue从Game.js传递到Board.js和Square.js;

您正在为Game组件中的所有正方形创建一个唯一状态。因此，如果您更改任何时间，所有正方形的状态都会更改，因此会出现此问题。因此，您可以做的是在Square组件中创建一个单独的状态，而不是公共状态，如下所示：
CODESANDBOX LINK

const Square = () => {
  const [value, setValue] = useState(null);
  const setSquareValue = () => {
    setValue("X");
  };
  return (
    <div className="square" onClick={setSquareValue}>
      {value}
    </div>
  );
};

问题在于您跟踪value的位置。将存储value状态的逻辑从Game.js移动到Square.js
当你的应用启动时，有一个初始值设置为value的Game示例。然后，你将这个值传递给Board，Board会将同一个值渲染9次。同样，当你更改这个值时，它会在Game中更改，然后传递给Board，最后渲染9次。
让Square存储自己的状态。

这是因为您只使用一个状态变量来表示所有平方：const [值，设置值] =使用状态（null）;
你可以声明一个数组变量，它的长度是9，即9的平方.

游戏.js

import React, { useState } from 'react';
import './Game.css'
import Board from './Board';

const Game = () => {
  const [value, setValue] = useState(Array(9).fill(''));
  const setSquareValue = (index) => {
    let values = [...value];
    values[index] = 'X';
    setValue(values);
  }
  return (
    <div className='game'>
      <h1 style={{color: "#fff"}}>Tic Tac Toe</h1>
      <h4 style={{color: "#2D033B"}}>Winner: </h4>
      <Board value={value} setSquareValue={setSquareValue} />
    </div>
  );
};

export default Game;

董事会.js

import React from "react";
import Square from "./Square";
import "./Board.css";

const Board = ({ value, setSquareValue }) => {
  const squareKeys = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  return (
    <div className="board">
      {squareKeys.map((squareKey, index) => (
        <Square 
        key={squareKey} 
        value={value[index]}
        ind = {index}
        setSquareValue={setSquareValue} />
      ))}
    </div>
  );
};

export default Board;

方形.js

import React from "react";
import "./Square.css";

const Square = ({ value, ind, setSquareValue }) => {
  return (
    <div className="square" onClick={() => setSquareValue(ind)}>
      {value}
    </div>
  );
};

export default Square;