How to position all elements of Table Header in one line using React Table

Question

In the project we use React Table to render table data. I need to fix a bug and need to achieve the result that all elements in React Table column header are in one line. So far title and arrow for sorting are in one line, but filtering icon is below

This is how current code looks like

<StyledTableHeader
    key={idx}
    isSorted={column.isSorted}
    key={column.id}
>
    <span
        {...column.getHeaderProps(
            column.getSortByToggleProps(),
            {
                className:
                    column.collapse
                        ? 'collapse'
                        : '',
            }
        )}
    >
        {column.render('Header')}
    </span>
    <span>
        {column.isSorted ? (
            column.isSortedDesc ? (
                <StyledArrowDownwardIcon />
            ) : (
                <StyledArrowUpwardIcon />
            )
        ) : (
            ''
        )}
    </span>
    {columnsCount > 5 ? (
        <StyledHeaderDivFlex>
            {column.canFilter
                ? column.render(
                      'Filter'
                  )
                : null}
        </StyledHeaderDivFlex>
    ) : (
        <StyledHeaderDivBlock>
            {column.canFilter
                ? column.render(
                      'Filter'
                  )
                : null}
        </StyledHeaderDivBlock>
    )}
 
</StyledTableHeader>

when I wrap all elements of header into div and give props to have flex-direction row it partly works. You can see in the picture below that filtering icon actually goes inline with header, but sorting icon disappears. When I press on the header it only changes color to orange and I can see that sorting works, but it does not display sorting icon.

<StyledTableHeader
    key={idx}
    isSorted={column.isSorted}
    key={column.id}
>
    <div
        style={{
            display: 'flex',
            flexDirection: 'row',
        }}
    >
    <span
        {...column.getHeaderProps(
            column.getSortByToggleProps(),
            {
                className:
                    column.collapse
                        ? 'collapse'
                        : '',
            }
        )}
    >
        {column.render('Header')}
    </span>
    <span>
        {column.isSorted ? (
            column.isSortedDesc ? (
                <StyledArrowDownwardIcon />
            ) : (
                <StyledArrowUpwardIcon />
            )
        ) : (
            ''
        )}
    </span>
    {columnsCount > 5 ? (
        <StyledHeaderDivFlex>
            {column.canFilter
                ? column.render(
                      'Filter'
                  )
                : null}
        </StyledHeaderDivFlex>
    ) : (
        <StyledHeaderDivBlock>
            {column.canFilter
                ? column.render(
                      'Filter'
                  )
                : null}
        </StyledHeaderDivBlock>
    )}
    </div>
</StyledTableHeader>

I have tried also to give to display:flex; flex-direction:row, but it then goes crazy and it gives this propertly to parent for all headers, not touching single column header.

Can You please advise how I can fix it ?

thanks !!!!