Estoy tratando de cambiar el tamaño de la cuadrícula en mi aplicación Conway game of life, pero cuando hago clic en el botón para configurar nuevos numCols/numRows, solo uno de ellos se ve afectado en la aplicación. ¿Cómo establezco efectivamente un nuevo estado para que la cuadrícula cambie de tamaño como se esperaba?

Tengo 2 botones en la aplicación, uno para hacer la cuadrícula más pequeña y otro para hacerla más grande. onClick activan la función sizeHandler & sizeHandler2.

Supongo que necesito establecer un nuevo estado en un método diferente, pero probé algunos métodos sin éxito.

 import React, { useState } from 'react' import './App.css'; function App() { const color = "#111" const [numRows, setNumRows] = useState(20) const [numCols, setNumCols] = useState(20) const generateEmptyGrid = () => { const rows = []; for (let i = 0; i < numRows; i++) { rows.push(Array.from(Array(numCols), () => 0)) } return rows } const [grid, setGrid] = useState(() => { return generateEmptyGrid(); }) const sizeHandler = () => { setNumRows(40) setNumCols(40) } const sizeHandler2 = () => { setNumRows(20) setNumCols(20) } // RENDER return ( <div className="page"> <div className="title"> <h1> Conway's Game Of Life </h1> <button onClick={sizeHandler}> Size+ </button> <button onClick={sizeHandler2}> Size- </button> </div> <div className="grid" style={{ display: 'grid', gridTemplateColumns: `repeat(${numCols}, 20px)` }}> {grid.map((rows, i) => rows.map((col, j) => <div className="node" key={`${i}-${j}`} style={{ width: 20, height: 20, border: 'solid 1px grey', backgroundColor: grid[i][j] ? color : undefined }} /> ))} </div> </div> ); } export default App;