Remove entire main header of ag-grid column which has child columns

Question

Below is the ag-grid colum, which has a main header on top of its child column,

[
{
 headerName: "Country",
 headerClass: `{styles.country__header}`,
 children : [
{
  headerName: "State1",
 headerClass: `{styles.country__state}`,
cellClass:`{styles.country__stateCell}`,
},
{
  headerName: "State2",
 headerClass: `{styles.country__state}`,
cellClass:`{styles.country__stateCell}`,
},
 ]
},
]

I'm trying to remove the main header, but even after removing headerName, the below border stays, so tried removing it by adding border-style:none in .less file. Still bottom border exists.

less file
.country {
 &__header {
 border-style: none;
}
}

In dev tools I can see for the bottom border div, below style exist which has border-style: solid, so on making border-style:none, this border can be removed, but in code it doesnot work.

.ag-theme-brml-new .ag-header-group-cell-with-group ..ag-header-group-cell-label {
 border-style:solid;
}


             County
--------------------------------
      State1       State2