Improving react performance - 'click' handler took 164ms

I am trying to build the game "game of life" with ReactJS.

When I click each box in the grid I get this warning in the console "[Violation] 'click' handler took 164ms"

how can I improve the code performace so I won't see this warning?

I have the App component that holds the grid state

and the Column that is a pure component

App.js
import React, { useState, useCallback } from "react";
import "./App.css";
import Column from "./components/Column";

//** Num cols and rows
const numCols = 100;
const numRows = 100;

//** Generating empty grid
const generateEmptyGrid = () => {
  const rows = [];
  for (let i = 0; i < numRows; i++) {
    rows.push(Array.from(Array(numCols), () => 0));
  }
  return rows;
};

function App() {
  //** setting initial grid
  const [grid, setGrid] = useState(() => {
    return generateEmptyGrid();
  });


  //** handling each box click
  const clickCol = useCallback((row, col) => {
    setGrid((prevGrid) => {
      const newGrid = Object.assign([], prevGrid);
      newGrid[row][col] = newGrid[row][col] === 1 ? 0 : 1;
      return newGrid;
    });
  }, []);

  return (
    <div className="grid">
      {grid.map((rows, i) =>
        rows.map((col, k) => (
          <Column
            key={`${i}-${k}`}
            handleClick={clickCol}
            rIndex={i}
            cIndex={k}
            col={col}
          />
        ))
      )}
    </div>
  );
}

export default App;

Column.js
import React, { memo } from "react";

function Column({ col, handleClick, rIndex, cIndex }) {
  const handleOnClick = () => {
    handleClick(rIndex, cIndex);
  };
  return (
    <div
      onClick={handleOnClick}
      className="column"
      style={col === 1 ? { backgroundColor: "black" } : undefined}
    ></div>
  );
}

export default memo(Column);

Column.whyDidYouRender = true