React问题--如何控制网格中特定“瓦片”的状态？

import React, { useState } from 'react';

// 瓦片组件
const Tile = ({ status }) => {
  return <div className={`tile ${status}`}></div>;
};

// 网格组件
const Grid = () => {
  const [tileStatus, setTileStatus] = useState([
    ['active', 'inactive', 'inactive'],
    ['inactive', 'active', 'inactive'],
    ['inactive', 'inactive', 'inactive']
  ]);

  const handleClick = (row, col) => {
    // 更新特定瓦片的状态
    const newTileStatus = [...tileStatus];
    newTileStatus[row][col] = 'active';
    setTileStatus(newTileStatus);
  };

  return (
    <div className="grid">
      {tileStatus.map((row, rowIndex) => (
        <div key={rowIndex} className="row">
          {row.map((status, colIndex) => (
            <Tile
              key={colIndex}
              status={status}
              onClick={() => handleClick(rowIndex, colIndex)}
            />
          ))}
        </div>
      ))}
    </div>
  );
};

export default Grid;