Table header highlight not showing on hover

I am trying to have sorting enabled on my table. When a user clicks on a header, the client does an API request to fetch sorted data based on the column. This functionality works w/ the following:

<t.head
  @columns={{@tableColumns}}
  @onUpdateSorts={{this.handleColumnHeaderClick}}
  @widthConstraint="eq-container"
  as |h|
>
  <h.row as |r|>
    <r.cell class="FileManager_tableCell" as |column columnMeta|>
      <span class="FileManager_tableHeader">
        {{column.name}}
        {{#if column.isSortable}}
          {{alloy-icon name='sort' size='small'}}
        {{/if}}
      </span>
    </r.cell>
  </h.row>
</t.head>

However when I hover my mouse, I don't get the highlight css.

The tableColumns I passed in is:

tableColumns = [
    { name: '', valuePath: 'fileType', textAlign: 'right', width: 50, isSortable: false },
    { name: 'Name', valuePath: 'name', textAlign: 'left', width: 300, isSortable: true },
    { name: 'Location', valuePath: 'location', textAlign: 'left', width: 100, isSortable: true },
    { name: 'Shared with', valuePath: 'sharedWith', textAlign: 'left', width: 100, isSortable: false },
    { name: 'Last used', valuePath: 'lastUsed', textAlign: 'left', width: 50, isSortable: true },
    { name: '', width: 50 },
  ],

Am I missing something here?

Running "ember-table": "^3.3.1",

Start by reproducing the provided table-header example with ember-table 3.3.1 and inspect the header hover styling used by the table components. Done means sortable table headers visibly receive the expected highlight when hovered, while the reported sorting behavior continues to work.