Style AG Grid's rowGroup-CodePudding

I am currently using AG GRID in my project and have implemented the RowGroup functionality for one of the columns,

Here's my code: HTML

    <div id="myGrid" style="height: 400px;width:80%; display:none" class="ag-theme-alpine">
    </div>

JS:

     var gridOptions_PortCd = {
        suppressClickEdit: true,
        columnDefs: [
           { headerName: "Col1", field: "Col1", rowGroup: true, hide: true },
           
            { headerName: "Val1", field: "val2", minWidth: 200 },
            
        ],
        defaultColDef: {
            sortable: true,
            filter: true,
            resizable: true,
        },
        autoGroupColumnDef: {
            headerName: 'ColA',
            minWidth: 200,
        },
        groupDisplayType: 'singleColumn',
        animateRows: true,
    };

I'm able to feed the grid some JSON data, and all looks great (I'm not including the rest of the code as I do not think it is relevant to the question).

Now what's happening is, the Grid looks totally great, however I want to be able to style to rowGroup row in my grid because it is dark and I'd want it to just to be plain white.

here's what mine looks like:

Update:

Try to change the background color of ag-cell-wrapper:

 .ag-cell-wrapper {
            background-color: #dddbdb !important;
        }

result: