react make an ascending descending button

1import React from 'react';
2import './styles.css';
3
4const useSortableData = (items, config = null) => {
5  const [sortConfig, setSortConfig] = React.useState(config);
6
7  const sortedItems = React.useMemo(() => {
8    let sortableItems = [...items];
9    if (sortConfig !== null) {
10      sortableItems.sort((a, b) => {
11        if (a[sortConfig.key] < b[sortConfig.key]) {
12          return sortConfig.direction === 'ascending' ? -1 : 1;
13        }
14        if (a[sortConfig.key] > b[sortConfig.key]) {
15          return sortConfig.direction === 'ascending' ? 1 : -1;
16        }
17        return 0;
18      });
19    }
20    return sortableItems;
21  }, [items, sortConfig]);
22
23  const requestSort = (key) => {
24    let direction = 'ascending';
25    if (
26      sortConfig &&
27      sortConfig.key === key &&
28      sortConfig.direction === 'ascending'
29    ) {
30      direction = 'descending';
31    }
32    setSortConfig({ key, direction });
33  };
34
35  return { items: sortedItems, requestSort, sortConfig };
36};
37
38const ProductTable = (props) => {
39  const { items, requestSort, sortConfig } = useSortableData(props.products);
40  const getClassNamesFor = (name) => {
41    if (!sortConfig) {
42      return;
43    }
44    return sortConfig.key === name ? sortConfig.direction : undefined;
45  };
46  return (
47    <table>
48      <caption>Products</caption>
49      <thead>
50        <tr>
51          <th>
52            <button
53              type="button"
54              onClick={() => requestSort('name')}
55              className={getClassNamesFor('name')}
56            >
57              Name
58            </button>
59          </th>
60//...
61        </tr>
62      </thead>
63    </table>
64  );
65};
66