'remove fluent UI details List hover color issue

I am using fluent ui detailsList.

enter image description here

I have two columns one have no header name. but its have row data. If I hover my mouse its highlighted. I need to remove that header highlight color. If someone have an idea please suggest me.

 {
  key: "title",
  name: "Title",
  fieldName: "title",
  minWidth: 150,
  maxWidth: 350,
  isRowHeader: true,
  isResizable: true,
  isSorted: false,
  isSortedDescending: false,
  onColumnClick: _onColumnClick,
  data: "string",
  isPadded: true,
},
{
  key: "moreOptions",
  ariaLabel: "TypeButtonColumn",
  minWidth: 70,
  maxWidth: 90,
  onRender: (item) => {
    return (
      <IconButton
        disabled={_setDisabled(item)}
        menuProps={menuProps(item)}
        menuIconProps={{ iconName: "More" }}
      />
    );
  },
},


        <div id="searchGrid" style={gridStyle}>
        <MarqueeSelection>
          <DetailsList
            items={tableItems}
            compact={false}
            columns={tableColumns}
            selectionMode={SelectionMode.multiple}
            getKey={getKey}
            layoutMode={DetailsListLayoutMode.justified}
            isHeaderVisible={true}
            selection={selection}
            selectionPreservedOnEmptyClick={true}
            enterModalSelectionOnTouch={true}
            ariaLabelForSelectionColumn="Toggle selection"
            ariaLabelForSelectAllCheckbox="Toggle selection for all items"
            checkButtonAriaLabel="select row"
            visibility="false"
          />
        </MarqueeSelection>
      </div>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source