How to sort or create a new array by grouping year and data

I need to sort this array of objects, in the format that gives me reading for the development of the layout below:

I arrived at this code, but it’s still not enough for what I need, besides that I’m not using the best practices… here’s the code:

const testeDate = () => {
    let dates = [];
    balance.history.map((balanceItem) => {
      yearkey = formatDate(balanceItem.created_at, 'yyyy');

      if (dates.filter((e) => e.year === yearkey).length > 0) {
        dates.balances.push(balanceItem);
        console.log('nivel 1');
      } else {
        dates.push({ year: yearkey, balances: balanceItem });
        console.log('nivel 2');
      }
    });

    console.log(dates);
  };


const [balance, setBalance] = useState({
    title: 'Warrior of Wisdom',
    contract_number: 11111,
    updated_at: '2022-05-11T20:13:05.000000Z',
    published_at: '2022-05-11T20:13:05.000000Z',

    history: [
      {
        id: 1,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2021-05-11T20:13:05.000000Z',
      },
      {
        id: 2,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2021-06-11T20:13:05.000000Z',
      },
      {
        id: 3,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2021-07-11T20:13:05.000000Z',
      },
      {
        id: 4,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2022-05-11T20:13:05.000000Z',
      },
      {
        id: 5,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2019-05-11T20:13:05.000000Z',
      },
      {
        id: 6,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2020-05-11T20:13:05.000000Z',
      },
      {
        id: 7,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2022-06-11T20:13:05.000000Z',
      },
    ],
  });

Above also contains the array that I need to modify, I need it to look like the example below:

const arrayPerfect = [
  {
    year: 2021,
    balances: [
      {
        id: 1,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2021-05-11T20:13:05.000000Z',
      },
      {
        id: 2,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2021-06-11T20:13:05.000000Z',
      },
      {
        id: 3,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2021-07-11T20:13:05.000000Z',
      },
    ],
  },
  {
    year: 2022,
    balances: [
      {
        id: 4,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2022-05-11T20:13:05.000000Z',
      },
    ],
  },
  {
    year: 2019,
    balances: [
      {
        id: 5,
        invoicing: 99999,
        expense: 99999,
        project_profit: 99999,
        developer_profit: 99999,
        publisher_profit: 99999,
        created_at: '2019-05-11T20:13:05.000000Z',
      },
    ],
  },
];

Answer

You can group the data using Array.prototype.reduce. Refer to snippet below:

const data = [{id:1,invoicing:99999,expense:99999,project_profit:99999,developer_profit:99999,publisher_profit:99999,created_at:"2021-05-11T20:13:05.000000Z"},{id:2,invoicing:99999,expense:99999,project_profit:99999,developer_profit:99999,publisher_profit:99999,created_at:"2021-06-11T20:13:05.000000Z"},{id:3,invoicing:99999,expense:99999,project_profit:99999,developer_profit:99999,publisher_profit:99999,created_at:"2021-07-11T20:13:05.000000Z"},{id:4,invoicing:99999,expense:99999,project_profit:99999,developer_profit:99999,publisher_profit:99999,created_at:"2022-05-11T20:13:05.000000Z"},{id:5,invoicing:99999,expense:99999,project_profit:99999,developer_profit:99999,publisher_profit:99999,created_at:"2019-05-11T20:13:05.000000Z"},{id:6,invoicing:99999,expense:99999,project_profit:99999,developer_profit:99999,publisher_profit:99999,created_at:"2020-05-11T20:13:05.000000Z"},{id:7,invoicing:99999,expense:99999,project_profit:99999,developer_profit:99999,publisher_profit:99999,created_at:"2022-06-11T20:13:05.000000Z"}];

const result = Object.values(
  data.reduce((res, o) => {
    const key = o.created_at.slice(0, 4);
    if (!res[key]) {
      res[key] = { year: key, balances: [] };
    }
    res[key].balances.push(o);
    return res;
  }, {})
);

console.log(result);