Lo que quiero es unir mis matrices que obtengo de mi función de mapa.

Traté de hacer con reduce :

 const onFinish = (values) => { values.fields.map((el, idx) => { console.log({ ...el, index: idx }); // this `console.log` prints me one array after the other }).reduce((acc, x) => {console.log(acc,x)}); // I tried with `reduce` but it prints me null

También traté de hacer con useState :

 const onFinish = (values) => { values.fields.map((el, idx) => { if (myArray === null){ setMyArray(() => { return { ...el, index: idx }; }); } else { setMyArray(() => { return {...myArray,...el, index: idx }; }); } }); console.log(myArray) // at my first call to this const onFinish myArray is printed as [] and at the second it prints with the last object only };

¿Alguien sabe cómo joined/merged estos objetos?

Datos de muestra de la forma en que se imprimen:

Como quiero ser: