material-react-table row re-order not working

I am trying to make a table in react where I can re-order the rows in two ways:

1. drag and drop the rows
2. auto sort by clicking the col header, so if i click the 'name' col header, that col will get re-ordered alphabetically.

In my codesandbox.io example below, I have it setup so that when you select any rows, it prints out the row order: https://codesandbox.io/s/table-order-demo-ysnq27?file=/src/Table.js:101-121

As you can see in this image, when I select all the rows, the console.log terminal print out is in the correct order. If i drag and drop the rows individually, the selected order will also be the correct.

But now if i click the "name" col header so that an arrow is present indicating the table has been sorted based on that row, the selected order is incorrect:

How can I fix this col header re-order, or fix my method of collecting the selected rows in the order they appear on screen? Here is my Table.js file:

import React, { useState, useEffect, useRef, useMemo } from "react";
import MaterialReactTable from "material-react-table";

const Table = ({ tableData, onSelectedRowsChanged, columnInfo }) => {
  const [data, setData] = useState([]);
  const [rowSelection, setRowSelection] = useState({});

  //call setData() function every time tableData var changes
  useEffect(() => {
    setData(tableData);
  }, [tableData]);

  //call getSelectedRows() function every time rowSelection var changes
  useEffect(() => {
    getSelectedRows();
  }, [rowSelection]);

  //simple column definitions pointing to flat data
  const columns = useMemo(() => columnInfo, [columnInfo]);

  function getSelectedRows() {
    let selectedRows = [];
    for (const [key, value] of Object.entries(rowSelection)) {
      selectedRows.push(data[key]);
    }
    onSelectedRowsChanged(selectedRows);
  }

  return (
    <>
      <MaterialReactTable
        autoResetPageIndex={false}
        columns={columns}
        data={data}
        enableRowSelection
        onRowSelectionChange={setRowSelection}
        state=
        //clicking anywhere on the row will select it
        muiTableBodyRowProps={({ row }) => ({
          onClick: row.getToggleSelectedHandler(),
          sx: { cursor: "pointer" }
        })}
        enableRowNumbers
        rowNumberMode="static"
        initialState=
        enableTopToolbar={false}
        enableRowOrdering
        muiTableBodyRowDragHandleProps={({ table }) => ({
          onDragEnd: () => {
            const { draggingRow, hoveredRow } = table.getState();
            if (hoveredRow && draggingRow) {
              data.splice(
                hoveredRow.index,
                0,
                data.splice(draggingRow.index, 1)[0]
              );
              setData([...data]);
            }
          }
        })}
      />
    </>
  );
};

export default Table;

from material-react-table row re-order not working