дело в том что рендер синхронный, а onload — нет. Гружи размеры всех картинок заранее: useEffect + Promise.all, складывай результат в state, и уже из готового state собирай строки по 2 или 3.
const items = await Promise.all(list.map(async i => {
const src = `/img/${i.path}/${i.fileName}`;
const {naturalWidth: w, naturalHeight: h} = await getMeta(src);
return {...i, src, vertical: h > w};
}));
setItems(items);
дальше просто идёшь по items и группируешь: три вертикальных подряд — тройка, иначе пара. И да, если получится — отдавай width/height сразу в данных с бэка, тогда грузить картинки на клиенте ради размеров вообще не придётся.
