DetailList fabric ui排序问题React挂钩

import React, { useState, useEffect } from 'react';
import { DetailsList } from 'office-ui-fabric-react/lib/DetailsList';

const MyComponent = () => {
  const [data, setData] = useState([]); // 假设data是要展示的数据列表
  const [sortOrder, setSortOrder] = useState('asc'); // 排序方式，默认为升序

  useEffect(() => {
    // 根据sortOrder对data进行排序
    const sortedData = [...data].sort((a, b) => {
      // 根据具体需求编写排序逻辑
      if (sortOrder === 'asc') {
        return a.value - b.value;
      } else {
        return b.value - a.value;
      }
    });

    setData(sortedData);
  }, [sortOrder]);

  const handleSort = () => {
    // 切换排序方式
    setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
  };

  return (
    <div>
      <button onClick={handleSort}>切换排序</button>
      <DetailsList items={data} />
    </div>
  );
};

export default MyComponent;