SortableHeaderCell is out of alignment

[JoeVanGundy]

Describe the bug

After upgrading to a newer version to get multi-sort, it appears that the sort icon and all of the information in SortableHeaderCell is messed up stylistically.

To Reproduce

1. Just use multi-select.

Link to code example:

  const sortedRows = useMemo(() => {
    if (sortColumns.length === 0) return rows;
    return [...rows].sort((a, b) => {
      for (const sort of sortColumns) {
        const comparator = getComparator(sort.columnKey);
        const compResult = comparator(a, b);
        if (compResult !== 0) {
          return sort.direction === 'ASC' ? compResult : -compResult;
        }
      }
      return 0;
    });
  }, [rows, sortColumns]);

  return (
    <DataTableContainer>
      <ReactDataGrid
        columns={columns}
        rows={sortedRows}
        onColumnResize={(idx, width) => console.log(`Column ${idx} has been resized to ${width}`)}
        sortColumns={sortColumns}
        onSortColumnsChange={setSortColumns}
        // components={{ sortIcon: SortIcon }}
      />
    </DataTableContainer>
  );

Expected behavior

The icon and priority should be aligned horizontally. The Storybook example seems fine, but I don't have any extras defined and everything else matches. Is there a way for me to manually render the SortableHeaderCell item? I see it in the docs, but I can't find any way to actually override it.

I see I can specify the sortIcon via components, but the props that it is passed doesn't have the additional information like priority.

Environment

• react-data-grid version:7.0.0-beta.12
• react/react-dom version:16.14.0

Additional context