如何在reactJs中点击更改特定单元格2D网格中的框的颜色？

import React, { Component } from 'react';

class Grid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      gridColors: [
        ['red', 'blue', 'green'],
        ['yellow', 'orange', 'purple'],
        ['pink', 'gray', 'brown']
      ]
    };
  }

  handleClick = (rowIndex, colIndex) => {
    // 创建一个新的二维数组，复制原来的状态
    const newGridColors = [...this.state.gridColors];
    // 根据点击的位置，更新对应单元格的颜色
    newGridColors[rowIndex][colIndex] = 'black';
    // 更新state
    this.setState({ gridColors: newGridColors });
  }

  render() {
    return (
      <table>
        <tbody>
          {this.state.gridColors.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {row.map((color, colIndex) => (
                <td
                  key={colIndex}
                  style={{ backgroundColor: color }}
                  onClick={() => this.handleClick(rowIndex, colIndex)}
                ></td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default Grid;