我正在尝试创建一个可点击的方框网格，其中方框知道它们与哪些其他方框相邻。JS/React

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

const Grid = () => {
  const [grid, setGrid] = useState(Array(4).fill().map(() => Array(4).fill(false)));

  const handleClick = (row, col) => {
    const newGrid = produce(grid, draft => {
      draft[row][col] = !draft[row][col];
    });
    setGrid(newGrid);
  };

  const getNeighbors = (row, col) => {
    const neighbors = [];
    if (row > 0) neighbors.push([row - 1, col]);
    if (row < 3) neighbors.push([row + 1, col]);
    if (col > 0) neighbors.push([row, col - 1]);
    if (col < 3) neighbors.push([row, col + 1]);
    return neighbors;
  };

  return (
    <div className="grid">
      {grid.map((row, rowIndex) => (
        <div key={rowIndex} className="row">
          {row.map((cell, colIndex) => (
            <div
              key={colIndex}
              className={`cell ${cell ? 'active' : ''}`}
              onClick={() => handleClick(rowIndex, colIndex)}
            >
              {getNeighbors(rowIndex, colIndex).map(([nRow, nCol], index) => (
                <span key={index}>[{nRow}, {nCol}]</span>
              ))}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

export default Grid;

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.row {
  display: flex;
}

.cell {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cell.active {
  background-color: #007bff;
}