Add dynamic styles to AG Grid row groups

I’m having trouble adding dynamic styles to row groups on an AG Grid table because I need each row group to have its own custom background color in hex that comes from an API.

I’ve tried using AG Grid’s autoGroupColumnDef with cellStyle, but since AG Grid only stores the value that will be displayed, I can’t access it.

To illustrate what I want, I made a drawing.
Image

Here is my code:

var levels = "";

if (data != null && data != undefined && data.d != '[]') {
    levels = JSON.parse(data.d)[0].levels;
}

var columnDefs = [{
        headerName: "CT1",
        field: "category1",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 1,
        hide: true
    },
    {
        headerName: "CT2",
        field: "category2",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 2,
        hide: true
    },
    {
        headerName: "CT3",
        field: "category3",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 3,
        hide: true
    },
    {
        headerName: "CT4",
        field: "category4",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 4,
        hide: true
    },
    {
        headerName: "CT5",
        field: "category5",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 5,
        hide: true
    },
    {
        headerName: "CT6",
        field: "category6",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 6,
        hide: true
    },
    {
        headerName: "CT7",
        field: "category7",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 7,
        hide: true
    },
    {
        headerName: "CT8",
        field: "category8",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 8,
        hide: true
    },
    {
        headerName: "CT9",
        field: "category9",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 9,
        hide: true
    },
    {
        headerName: "CT10",
        field: "category10",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 10,
        hide: true
    },
    {
        headerName: "C",
        field: "descriptionC",
        rowGroup: true,
        filter: true,
        rowGroupIndex: 11,
        hide: true
    },
    {
        headerName: "C",
        field: "descriptionC",
        rowGroup: true,
        filter: true,
        hide: true
    },
    {
        headerName: "color1",
        field: "color1",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color2",
        field: "color2",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color3",
        field: "color3",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color4",
        field: "color4",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color4",
        field: "color5",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color6",
        field: "color6",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color7",
        field: "color7",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color8",
        field: "color8",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color9",
        field: "color9",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "color10",
        field: "color10",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID1",
        field: "idCategory1",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID2",
        field: "idCategory2",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID3",
        field: "idCategory3",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID4",
        field: "idCategory4",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID4",
        field: "idCategory5",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID6",
        field: "idCategory6",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID7",
        field: "idCategory7",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID8",
        field: "idCategory8",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID9",
        field: "idCategory9",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "ID10",
        field: "idCategory10",
        aggFunc: "avg",
        hide: true
    },
    {
        headerName: "",
        field: "edit",
        width: 50,
        cellClass: 'text-center',
        sortable: true,
        hide: masterOnlyView == "1",
        cellClassRules: {
            "gridIconEdit": function(params) {
                return params.node.key != null && params.node.field != "descricaoCIP"
            },
            "text-center": function(params) {
                return params.node.key == null || params.node.field == "descricaoCIP"
            }
        }
    }
];
var obj = JSON.parse(data.d);

var gridOptions = {
    columnDefs: columnDefs,
    singleClickEdit: true,
    stopEditingWhenCellsLoseFocus: true,
    rowSelection: 'multiple',
    groupDefaultExpanded: levels - 1,
    animateRows: true,
    rowData: obj,
    defaultColDef: {
        filter: true,
    },
    autoGroupColumnDef: {
        pinned: 'left',
        minWidth: 1000,
        headerName: lblColunaDescricao,
        cellStyle: (cell) => {
            if (cell.node.field != "descricaoCIP") {
                return {
                    backgroundColor: 'green'
                }
            }
        },
        cellClassRules: {
            "cell-blue": function(params) {
                return params.node.field == "descricaoCIP"
            },
            "total-cell-left-no-bg": function(params) {
                return params.node.field != "descricaoCIP"
            }
        }
    },
};
var eGridDiv = document.querySelector('#myGrid');
eGridDiv.innerHTML = "";

let gridElement = new agGrid.Grid(eGridDiv, gridOptions);
fnGlobalSetGridOptions(gridElement, {
    gridOptions
});

The API return has a structure like this for each value, and then it is grouped by AG Grid:

{
    category1: "1. CATEG",
    category2: "1.1. SUB CATEG",
    category3: "1.1.1. SUB SUB CATEG FV",
    category4: null,
    category5: null,
    category6: null,
    category7: null,
    category8: null,
    category9: null,
    category10: null,
    codeC: "FV01.01.02",
    color1: "#1cd1d4",
    color2: "#e83030",
    color3: "#FFFFFF",
    color4: null,
    color5: null,
    color6: null,
    color7: null,
    color8: null,
    color9: null,
    color10: null,
    descriptionC: "FV01.01.02",
    idC: 13161,
    idCategory1: 49,
    idCategory2: 50,
    idCategory3: 52,
    idCategory4: 0,
    idCategory5: 0,
    idCategory6: 0,
    idCategory7: 0,
    idCategory8: 0,
    idCategory9: 0,
    idCategory10: 0,
    levels: 3
}

Can anyone help?