DetailList not rendering selected row in nextjs

Question

I'm using FluentUI's detail list in a nextjs application like so:

<DetailList
        className="div1"
        items={conversations}
        columns={ChatNavColumns}
        compact={true}
        setKey="set"
        selectionPreservedOnEmptyClick={true}
        layoutMode={DetailsListLayoutMode.justified}
        selection={selection}
        onItemInvoked={onSelection}
        ariaLabelForSelectionColumn="Toggle selection"
        ariaLabelForSelectAllCheckbox="Toggle selection for all items"
        checkButtonAriaLabel="select row"
        onActiveItemChanged={handleActiveChanged}

    />

When I select a row, I can see in the console that the onActiveItemChanged function is called for the right row. The problem is, the component does not re-render to show that component is selected. It only does so when after nextjs does a Fast Refresh from some small code change I've made.

Below is the desired output

Any help with this appreciated