FluentUI DetailsHeader not showing the “Select All” checkbox after integrating a tooltip

Issue:

I’m working on a Fluent UI DetailsList to integrate a tooltip on the column headers when specified. I tried the approach given below, with renderColumnHeaderTooltip function rendering the tooltip and the rest of the column header.

onRenderDetailsHeader = React.useCallback((props?: Fluent.IDetailsHeaderProps) => {
        if (!props) return <span />
        const renderColumnHeaderTooltip = (tooltipHostProps: any) => {
          const column = props.columns.find(col => col.key === tooltipHostProps?.column?.key) as WaveColumn
          if (!column) return null
          return (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <>{tooltipHostProps?.children}</>
              {
                column.tooltip && (
                  <Fluent.TooltipHost content={column.tooltip} calloutProps={{ gapSpace: -10 }}>
                    <Fluent.Icon iconName="info" />
                  </Fluent.TooltipHost>
                )
              }
            </div>
          )
        }
        return (
          <Fluent.Sticky stickyPosition={Fluent.StickyPositionType.Header} isScrollSynced>
            <Fluent.DetailsHeader
              {...props}
              isAllCollapsed={groups?.every(group => group.isCollapsed)}
              onRenderColumnHeaderTooltip={renderColumnHeaderTooltip}
              styles={{
                ...props.styles,
                root: {...},
                cellSizerEnd: {...},
                ,
              }}
            />
          </Fluent.Sticky>
        )
      }

This approach works, it displays the tooltip without an issue. But when the selectionMode=multiple on the DetailsList, it doesn’t display the checkbox for selecting all the rows anymore.

Expected Output

Actual Output

What I’ve tried

I tried passing the selectionMode to the DetailsHeader component like below, but still didn’t work.

<Fluent.DetailsHeader
              {...props}
              isAllCollapsed={groups?.every(group => group.isCollapsed)}
              onRenderColumnHeaderTooltip={renderColumnHeaderTooltip}
              selectionMode={
                props.selectionMode === 1
                  ? Fluent.SelectionMode.single
                  : props.selectionMode === 2
                  ? Fluent.SelectionMode.multiple
                  : Fluent.SelectionMode.none
              }
...

Outro:

I included onRenderDetailsHeader method here because that was where I did the changes which caused this issue. Can someone tell me what I’ve done wrong here? Or if you have implemented a similar functionality, what other approach I can take?