Table header highlight not showing on hover

[aemc]

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",