Estoy tratando de agregar un botón que alterna la clasificación en la cuadrícula, cuando hago clic en el botón, y la consola registra las definiciones de columna predeterminadas que se alternaron pero la cuadrícula nunca se representó.

 import React, { useState } from 'react'; import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-alpine.css'; function App() { const [sort, setSort] = useState(false); const [rowData] = useState([ { make: 'Toyota', model: 'Celica', price: 35000 }, { make: 'Ford', model: 'Mondeo', price: 32000 }, { make: 'Porsche', model: 'Boxter', price: 72000 }, ]); const [columnDefs] = useState([ { field: 'make' }, { field: 'model' }, { field: 'price' }, ]); const [defaultColDef, setDefaultColDef] = useState({ sortable: sort, }); const sortHandler = () => { setDefaultColDef({ ...defaultColDef, sortable: !sort }); setSort(prev => !prev); }; console.log(defaultColDef); return ( <div> <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}> <AgGridReact columnDefs={columnDefs} defaultColDef={defaultColDef} rowData={rowData} ></AgGridReact> </div> <button onClick={sortHandler}> {sort ? 'No sort' : 'Sort'} </button> </div> ); } export default App;

¿Qué podría estar mal?