Функции сортировки не сортировка таблицы

Question

У меня есть таблица, которая получает информацию, однако я хочу позволить пользователю нажимать на заголовки таблиц, которые позволят сортировать информацию, я основываю эту таблицу дизайна и шаблона пользовательского интерфейса материала, которую вы можете найти здесь , Я думаю, что моя проблема может заключаться в том, что мне нужно передать некоторые функции в качестве реквизита в компонент поставщика, или, возможно, я просто полностью пропустил функцию, любые предложения будут очень цениться

Таблица шаблонов

мой код ниже

   const SuppliersTable = (props) => {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const [order, setOrder] = useState('desc');
  const [orderBy, setOrderBy] = useState('');

  function stableSort(array, cmp) {
    const stabilizedThis = array.map((el, index) => [el, index]);
    stabilizedThis.sort((a, b) => {
      const order = cmp(a[0], b[0]);
      if (order !== 0) return order;
      return a[1] - b[1];
    });
    return stabilizedThis.map(el => el[0]);
  }

  function desc(a, b, orderBy) {
    if (b[orderBy] < a[orderBy]) {
      return -1;
    }
    if (b[orderBy] > a[orderBy]) {
      return 1;
    }
    return 0;
  }

  function getSorting(order, orderBy) {
    return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
  }

  function handleRequestSort(event, property) {
    const isDesc = orderBy === property && order === 'desc';
    setOrder(isDesc ? 'asc' : 'desc');
    setOrderBy(property);
  }

  function handleChangePage(event, page) {
    setPage(page);
  }

  function handleChangeRowsPerPage(event) {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  }


  const handleClick = (id) => {
    props.history.push(`/suppliers/${id}/details`);
  };


  const { classes, filteredSuppliers } = props;
  const emptyRows = rowsPerPage - Math.min(rowsPerPage, filteredSuppliers.length - page * rowsPerPage);
  return (
    <Paper className={classes.root}>
      <div className={classes.tableWrapper}>
        <Table className={classes.table} aria-label="tableTitle" id="suppliersTable">
          <SuppliersTableHead
            order={order}
            orderBy={orderBy}
            onRequestSort={handleRequestSort}
            rowCount={filteredSuppliers.length}
          />
          <TableBody aria-label="suppliers Table">
            {stableSort(filteredSuppliers, getSorting(order, orderBy))
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map(supplier => {
                return (
                  supplier.addressInfo.map(row => (
                    <TableRow className={classes.tableRow}
                      hover={true}
                      // onClick={() => { handleClick(supplier.id); }} for a later ticket
                      tabIndex={0}
                      key={row.id}
                    >
                      <TableCell component="th" scope="row" padding="none">{supplier.name}</TableCell>
                      <TableCell padding="none">{row.officeName}</TableCell>
                      <TableCell padding="none">{row.officeEmail}</TableCell>
                      <TableCell padding="none">{row.officeTelephone}</TableCell>
                      <TableCell padding="none">{row.town}</TableCell>
                      <TableCell padding="none">{row.county}</TableCell>
                      <TableCell padding="none">{row.postcode}</TableCell>
                    </TableRow>
                  ))
                );
              })}
            {emptyRows > 0 && (
              <TableRow style={{ height: 49 * emptyRows }}>
                <TableCell colSpan={8} />
              </TableRow>
            )}
          </TableBody>
        </Table>
        <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          count={filteredSuppliers.length}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            'aria-label': 'Previous Page',
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page',
          }}
          onChangePage={handleChangePage}
          onChangeRowsPerPage={handleChangeRowsPerPage}
        />
      </div>
    </Paper>
  );
};

export default withStyles(styles)(SuppliersTable);


const rows = [
  { id: 'title', numeric: false, disablePadding: true, label: 'Title' },
  { id: 'office', numeric: false, disablePadding: true, label: 'Office' },
  { id: 'email', numeric: false, disablePadding: true, label: 'Email' },
  { id: 'telephone', numeric: false, disablePadding: true, label: 'Telephone' },
  { id: 'town', numeric: false, disablePadding: true, label: 'Town' },
  { id: 'county', numeric: false, disablePadding: true, label: 'County' },
  { id: 'postCode', numeric: false, disablePadding: true, label: 'Post Code' },
];



const SuppliersTableHead = props => {
  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
  const createSortHandler = property => event => {
    onRequestSort(event, property);
  };


  return (
    <TableHead>
      <TableRow>
        {rows.map(row => (
          <TableCell
            key={row.id}
            align={row.numeric ? 'right' : 'left'}
            padding={row.disablePadding ? 'none' : 'default'}
            sortDirection={orderBy === row.id ? order : false}
          >
            <TableSortLabel
              active={orderBy === row.id}
              direction={order}
              onClick={createSortHandler(row.id)}
            >
              {row.label}
            </TableSortLabel>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
};

SuppliersTableHead.propTypes = {
  onRequestSort: PropTypes.func.isRequired,
  order: PropTypes.string.isRequired,
  orderBy: PropTypes.string.isRequired,
  rowCount: PropTypes.number.isRequired,
};

export default SuppliersTableHead;