El formato de fila condicional no se actualiza

Estoy creando una aplicación en Ag-grid React

Me gustaría que la cuadrícula resalte una fila si el usuario la ha etiquetado haciendo clic en una casilla de verificación. Estoy usando rowClassRules y funciona bien: si el usuario edita el valor del campo de etiqueta para una fila de falso a verdadero, la fila se resalta

Cuando agrego un procesador de celdas para hacer que el campo de etiqueta sea una casilla de verificación, deja de funcionar, vea el código a continuación

Cualquier consejo sobre lo que estoy haciendo mal sería apreciado

índice.js

import React, { useState } from "react";
import { render } from "react-dom";
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";
import "./index.css"
const App = () => {
 const AgGridCheckbox = (props) => {
 const boolValue = props.value && props.value.toString() === "true";
 const [isChecked, setIsChecked] = useState(boolValue);
 const onChanged = () => {
 props.setValue(!isChecked);
 setIsChecked(!isChecked);
 };
 return (
 <div>
 <input
  type="checkbox"
  checked={isChecked}
  onChange={onChanged}
 />
 </div>
 );
 };
 const [rowData] = useState([
 { tag: true, make: "Toyota", model: "Celica", price: 35000 },
 { tag: false, make: "Ford", model: "Mondeo", price: 32000 },
 { tag: false, make: "Porsche", model: "Boxter", price: 72000 },
 ]);
 const [columnDefs] = useState([
 { field: "tag", cellRenderer: AgGridCheckbox },
 // { field: "tag", editable: true },
 { field: "make" },
 { field: "model" },
 { field: "price" },
 ]);
 const gridOptions = {
 rowClassRules: {
 "row-tagged": (params) => params.api.getValue("tag", params.node),
 },
 };
 return (
 <div className="ag-theme-alpine" style={{ height: 400, width: 800 }}>
 <AgGridReact
 gridOptions={gridOptions}
 rowData={rowData}
 columnDefs={columnDefs}
 ></AgGridReact>
 </div>
 );
};
render(<App />, document.getElementById("root"));

índice.css

.row-tagged {
 background-color: #91bd80!important;
}

Solución del problema

Investigué un poco más y si agrego redrawRows() al controlador onChanged() en el procesador de celdas, así:

 const onChanged = () => {
 props.setValue(!isChecked);
 setIsChecked(!isChecked);
 setRowData(rowData);
 console.log(props);
 props.api.redrawRows({ rowNodes: [props.node] });
 };

Ahora funciona. Tenga en cuenta que pasar {rowNodes: [props.node]} significa (supongo) que solo vuelve a dibujar una sola fila.

Pregunta complementaria: ¿Es este el camino correcto a seguir? ¿Hay una manera más eficiente?