Emitir

O problema é que o mapeamento de array retorna um novo array, mas você quer mapear o array para o categoriesformato de estado que é um objeto. A lógica de mapeamento retorna um objeto para cada elemento de item no array de origem.

const newFinalList = items.map((item: any) => {
  return {                                      // <-- new object for each item
    [item.itemInfo.category]: { items: [item] } // <-- only one item in each items array
  }
})

Solução

Reduza a matriz em um objeto.

Exemplo:

// Iterate the items array and reduce into an object
const newFinalList = items.reduce((categories, item) => {
  // If the item category object doesn't exist, create it
  // with an initially empty items array
  if (!categories[item.itemInfo.category]) {
    categories[item.itemInfo.category] = {
      items: [],
    };
  }

  // Push the current item into the items array
  categories[item.itemInfo.category].items.push(item);

  // return the categories object
  return categories;
}, {});

const items = [
  { id: "1", itemInfo: { name: "itemName", category: "category1" } },
  { id: "2", itemInfo: { name: "itemName", category: "category1" } },
  { id: "3", itemInfo: { name: "itemName", category: "category2" } },
  { id: "4", itemInfo: { name: "itemName", category: "category1" } },
  { id: "5", itemInfo: { name: "itemName", category: "category2" } },
  { id: "6", itemInfo: { name: "itemName", category: "category2" } },
];

const newFinalList = items.reduce((categories, item) => {
  if (!categories[item.itemInfo.category]) {
    categories[item.itemInfo.category] = {
      items: [],
    };
  }
  categories[item.itemInfo.category].items.push(item);
  return categories;
}, {});

console.log({ newFinalList });

Se você estiver usando isso para mesclar alguns valores de props/context passados, é um antipadrão do React também armazenar esse "estado" derivado no estado do React. Calcule e use o valor diretamente, ou use o React.useMemohook para calcular e fornecer um valor de referência estável.

const newFinalList = React.useMemo(() => items.reduce((categories, item) => {
  if (!categories[item.itemInfo.category]) {
    categories[item.itemInfo.category] = {
      items: [],
    };
  }

  categories[item.itemInfo.category].items.push(item);
  return categories;
}, {}), [items]);

Drew bem apontou por que sua tentativa existente não funciona, mas se você quiser mesclar seu primeiro estado (categorias), para que ele inclua os itens com as respectivas categorias do seu estado de itens. Para fazer isso, você pode primeiro fazer do seu estado de itens um mapa de consulta que mapeia as categorias de itens para os objetos de itens e, em seguida, mapear por meio do seu categoriesestado, pegando as entradas dele e chamando .map()para adicionar os itens a cada objeto. Você pode então chamar Object.fromEntries()para convertê-lo de volta em um objeto:

const categories = { category1: { items: [] }, category2: { items: [] } };
const items = [ {"id": "1", itemInfo: { name: "itemName", category: "category1" }}, {"id": "2", itemInfo: { name: "itemName", category: "category1" }}, {"id": "3", itemInfo: { name: "itemName", category: "category2" }}, {"id": "4", itemInfo: { name: "itemName", category: "category1" }}, {"id": "5", itemInfo: { name: "itemName", category: "category2" }}, {"id": "6", itemInfo: { name: "itemName", category: "category2" }} ];

const itemsMap = Map.groupBy(items, o => o.itemInfo.category);
const merged = Object.fromEntries(Object.entries(categories).map(([key, val]) => [
  key,
  {...val, items: val.items.concat(itemsMap.get(key))}
]));
console.log(merged);