I am using AG Grid v23 with React 17 and trying to conditionally apply CSS classes to grid cells based on a state variable. However, the cellClassRules do not reflect the updated state variable, even though the state updates correctly in other parts of the app.

Details:

React Version: 17.x

AG Grid Version: 23.x

Issue Description:

I am trying to conditionally apply CSS classes to grid cells based on a state variable. However, the cell class does not update to reflect the latest state.

I have tried using cellClassRules and methods like refreshCells and redrawRows, but the issue persists.
The state update is correctly logged in useEffect, but cellClassRules seems to be using the initial state value.

Problem:

• The state update is logged correctly in useEffect.
• However, the CSS class applied via cellClassRules seems to use the initial value of the state and does not update when the state changes.
• I have tried calling refreshCells and redrawRows, but the issue persists.

import React, { useState, useEffect, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

const NewMatrix = () => {
  const [stateVariable, setStateVariable] = useState('defaultValue');
  const gridApiRef = useRef(null);

  const columnDefs = [
    {
      headerName: 'My Column',
      field: 'myField',
      cellClassRules: {
        'my-class': (params) => params.data.myField === stateVariable,
      },
    },
  ];

  useEffect(() => {
    if (gridApiRef.current) {
      gridApiRef.current.refreshCells({ force: true });
    }
  }, [stateVariable]);

  const onGridReady = (params) => {
    gridApiRef.current = params.api;
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={[
          { myField: 'value1' },
          { myField: 'defaultValue' },
        ]}
        onGridReady={onGridReady}
      />
      <button onClick={() => setStateVariable('value1')}>Change State</button>
    </div>
  );
};

export default NewMatrix;

my css is

.rag-red-outer {
  border: solid 1px !important;
  border-color:  red !important;
}

Steps Taken:

Used cellClassRules to apply conditional classes.
Tried refreshCells and redrawRows methods.
Verified that the state is updated and logged correctly in useEffect.

Could you please assist in identifying why the cellClassRules might not be reflecting the updated state variable? Are there any known issues with AG Grid v23 and React 17, or additional steps I should take to resolve this?