如何在reactjs中按值对对象数组进行分组

function groupBy(arr, key) {
  return arr.reduce((result, obj) => {
    const group = obj[key];
    if (!result[group]) {
      result[group] = [];
    }
    result[group].push(obj);
    return result;
  }, {});
}

const data = [
  { id: 1, name: 'John', group: 'A' },
  { id: 2, name: 'Jane', group: 'B' },
  { id: 3, name: 'Bob', group: 'A' },
  { id: 4, name: 'Alice', group: 'B' },
];
const groupKey = 'group';

const groupedData = groupBy(data, groupKey);

return (
  <div>
    {Object.keys(groupedData).map((group) => (
      <div key={group}>
        <h2>{group}</h2>
        <ul>
          {groupedData[group].map((obj) => (
            <li key={obj.id}>{obj.name}</li>
          ))}
        </ul>
      </div>
    ))}
  </div>
);