lets say I have this array:

  const dataUse = [
    { group: 'z', name: 'hello' },
    { group: 'z', name: 'hello2' },
    { group: 'z', name: 'hello3' },
    { group: 'x', name: 'hello1' },
    { group: 'x', name: 'hello2' }
  ];

I want to group it on group and I do so by:

group func:

  const groupBy = <T, K extends keyof any>(arr: T[], key: (i: T) => K) =>
    arr.reduce((groups, item) => {
      (groups[key(item)] ||= []).push(item);
      return groups;
    }, {} as Record<K, T[]>);

calling:

  const grouped = groupBy(dataUse, (i) => i.group);

result:

{
x: Array
z: Array
}

Problem:

I need to be able to access the properties and in my case x and z are dynamic and will never have the same name. So I thought that I need to group my data as a specific container type:

type GroupContainer = {
  group: string;
  items: Array<MyListObj>;
};

Desiered output would be:

[
{Group: 'x', items:Array}
{Group: 'z', items:Array}
]

The helper func does turns this into records and Im not sure how to turn it into GroupContainer

How do I accomplish this?