javascript - React - Map() メソッド内でテーブル列をソートする

Question

テーブル ヘッダー データが .map() メソッド内に配置されているときに、テーブルを並べ替え (昇順/降順) しようとしています (この投稿のコードサンドボックス リンクの 73 行目を参照)。

手の絵文字をオンクリックで変更できますが、並べ替えは行われません。この機能の基になっているコードサンドボックスにある個々の文字列や数値ではなく、オブジェクトを map メソッドに渡すことに関係があると思います。これが私がモデリングしているオリジナルのサンドボックスです: https://codesandbox.io/embed/table-sorting-example-ur2z9?fontsize=14&hidenavigation=1&theme=dark

...そして、ここにソートする必要があるデータ構造を含むコードサンドボックスがあります: https://codesandbox.io/s/table-sorting-example-forked-dofhj?file=/src/App.js

各列をソート可能にするには、何を変更すればよいですか? ヘルプ/アドバイスをいただければ幸いです。

App.js

import React from "react";
import "./styles.css";
import {
  Button,
  Table,
  Thead,
  Tbody,
  Flex,
  Tooltip,
  Tr,
  Th,
  Td
} from "@chakra-ui/react";

//Table Headers
const TABLE_HEADERS = [
  { name: "ID Number" },
  { name: "User Type" },
  { name: "User Category" },
  { name: "User Interest" }
];

const useSortableData = (items, config = null) => {
  const [sortConfig, setSortConfig] = React.useState(config);

  const sortedItems = React.useMemo(() => {
    let sortableItems = [...items];
    if (sortConfig !== null) {
      sortableItems.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === "ascending" ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === "ascending" ? 1 : -1;
        }
        return 0;
      });
    }
    return sortableItems;
  }, [items, sortConfig]);

  const requestSort = (key) => {
    let direction = "ascending";
    if (
      sortConfig &&
      sortConfig.key === key &&
      sortConfig.direction === "ascending"
    ) {
      direction = "descending";
    }
    setSortConfig({ key, direction });
  };

  return { items: sortedItems, requestSort, sortConfig };
};

const ProductTable = (props) => {
  const { items, requestSort, sortConfig } = useSortableData(
    props.myUserErrorTypes
  );

  const getClassNamesFor = (name) => {
    if (!sortConfig) {
      return;
    }
    return sortConfig.key === name ? sortConfig.direction : undefined;
  };
  return (
    <Table>
      <caption>User Error Types</caption>
      <Thead>
        <Tr>
          {TABLE_HEADERS.map(({ name, description, isNumeric }) => (
            <Th key={name} isNumeric={isNumeric}>
              <Button
                type="button"
                onClick={() => requestSort(name)}
                className={getClassNamesFor(name)}
              >
                <Tooltip label={description} aria-label={description}>
                  {name}
                </Tooltip>
              </Button>
            </Th>
          ))}
        </Tr>
      </Thead>
      <Tbody>
        {items.map((error) => {
          const { userNumber, userType, errorId, errorCategory } = error;
          return (
            <React.Fragment key={errorId}>
              <Tr id={errorId} key={errorId}>
                <Td>{userNumber}</Td>
                <Td>{userType}</Td>
                <Td>{errorId}</Td>
                <Td>{errorCategory}</Td>
                <Td textAlign="center">
                  <Flex justify="justifyContent"></Flex>
                </Td>
              </Tr>
            </React.Fragment>
          );
        })}
      </Tbody>
    </Table>
  );
};

export default function App() {
  return (
    <div className="App">
      <ProductTable
        myUserErrorTypes={[
          {
            userNumber: 1234567890,
            userType: "SuperUser",
            errorId: 406,
            errorCategory: "In-Progress"
          },
          {
            userNumber: 4859687937,
            userType: "NewUser",
            errorId: 333,
            errorCategory: "Complete"
          }
        ]}
      />
    </div>
  );
}