title: Conditional row format not updating
body: <p>I am building an app in Ag-grid React</p>
  <p>I would like the grid to highlight a row if the user has tagged it by clicking on a checkbox.  I am using rowClassRules, and it works fine: if the user edits the value of the tag field for a row from false to true, the row becomes highlighted</p>
  <p>When I add in a cell renderer to make the tag field a checkbox it stops working, see code below</p>
  <p>Any advice on what I am doing wrong would be appreciated</p>
  <p><strong>index.js</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { render } from &quot;react-dom&quot;;
  import { AgGridReact } from &quot;ag-grid-react&quot;;
  
  import &quot;ag-grid-community/dist/styles/ag-grid.css&quot;;
  import &quot;ag-grid-community/dist/styles/ag-theme-alpine.css&quot;;
  import &quot;./index.css&quot;
  
  const App = () =&gt; {
      const AgGridCheckbox = (props) =&gt; {
          const boolValue = props.value &amp;&amp; props.value.toString() === &quot;true&quot;;
          const [isChecked, setIsChecked] = useState(boolValue);
          const onChanged = () =&gt; {
              props.setValue(!isChecked);
              setIsChecked(!isChecked);
          };
          return (
              &lt;div&gt;
                  &lt;input
                      type=&quot;checkbox&quot;
                      checked={isChecked}
                      onChange={onChanged}
                  /&gt;
              &lt;/div&gt;
          );
      };
  
      const [rowData] = useState([
          { tag: true, make: &quot;Toyota&quot;, model: &quot;Celica&quot;, price: 35000 },
          { tag: false, make: &quot;Ford&quot;, model: &quot;Mondeo&quot;, price: 32000 },
          { tag: false, make: &quot;Porsche&quot;, model: &quot;Boxter&quot;, price: 72000 },
      ]);
  
      const [columnDefs] = useState([
          { field: &quot;tag&quot;, cellRenderer: AgGridCheckbox },
          // { field: &quot;tag&quot;, editable: true },
          { field: &quot;make&quot; },
          { field: &quot;model&quot; },
          { field: &quot;price&quot; },
      ]);
  
      const gridOptions = {
          rowClassRules: {
              &quot;row-tagged&quot;: (params) =&gt; params.api.getValue(&quot;tag&quot;, params.node),
          },
      };
  
      return (
          &lt;div className=&quot;ag-theme-alpine&quot; style={{ height: 400, width: 800 }}&gt;
              &lt;AgGridReact
                  gridOptions={gridOptions}
                  rowData={rowData}
                  columnDefs={columnDefs}
              &gt;&lt;/AgGridReact&gt;
          &lt;/div&gt;
      );
  };
  
  render(&lt;App /&gt;, document.getElementById(&quot;root&quot;));
  </code></pre>
  <p><strong>index.css</strong></p>
  <pre><code>.row-tagged {
      background-color: #91bd80 !important;
  }
  </code></pre>