I would like the group headers of my datatable to be styled differently but have been unable to achieve this

Expected Behavior

including

dataTable: { groupHeader: { background: "red" }, }
in the grommet custom grommet theme object, should make the group header red

<DataTable columns={columns} data={DATA} sortable onSelect={()=>{}} groupBy={"location"}/>

according to my understanding of the docs
https://v2.grommet.io/datatable#dataTable.groupHeader.background

Actual Behavior

the group header remains unstyled

URL, screen shot, or Codepen exhibiting the issue

you can find repo here: X

grommet theme call: X

datatable call: X

Steps to Reproduce

1. used create react app with typescript: npx create-react-app $APP_NAME --template typescript
2. installed packages npm install grommet styled-components --save and npm install grommet-icons grommet-styles --save
3. rolled back styled-components to version ^5.3.11 for compatibility with grommet

Your Environment

I've also tested in a windows dev environment with same result

• Grommet version: 2.33.1
• Browser Name and version: Chrome Version 116.0.5845.110 (Official Build) (x86_64)
• Operating System and version (desktop or mobile): Mac OS 10.14.6 desktop