React Masonry Layout - блоки не выстраиваются, пока не поменяешь разрешение окна браузера

Использую модуль react-masonry-infinite (построен на react masonry layout). При загрузке блоки выстраиваются в несколько колонок:

Если подвигать край экрана, поменять его ширину, то галерея выстраивается как надо.

Логика такая - если данные об изображениях загрузились с сервака, мы их мапим, результат закидываем в стейт (state.photos). А потом отдаём их плагину, чтобы он построил галерею. Сначала результаты мапинга напрямую отдавались в плагин, стейт появился в ходе экспериментов, эффект тот же. Именно смена разрешения является триггером для правильного построения галереи.

Контейнер (фрагмент):

    if (
    props.state.serverDataIsLoaded === true &&
    props.state.photosIsLoaded === false &&
    props.state.serverDataIsFetching === false // Возможно, лишнее
  ) {
    mappedPhotos = props.state.serverData.results.map ((e, i) => (
      <li className={s.main__box} key={i}>
        <button
          className={e.liked_by_user ? '' : s.main__liked_false}
          onClick={() => toggleLike (e.id, e.liked_by_user)}
        >
          {e.likes}
        </button>
        <img id={e.id} src={e.urls.small} alt={e.alt_description} key={i} />
        <div className={s.main__description}>
          <a href={e.user.links.html} className={s.main__author}>
            {e.user.username}
          </a>
          <p className={s.main__date}>
            {e.created_at.slice (0, 10).replace (/-/g, '.')}
          </p>
        </div>
      </li>
    ));
    props.dispatch (setPhotosAC (mappedPhotos));
  }

  return (
    <MainAuthorized
      dataLength={dataLength}
      fetchMoreData={fetchMoreData}
      photos={props.state.photos}
    />
  );
};

reducer (фрагмент):

 case SET_PHOTOS: {
      state.photos = action.photos;
      state.photosIsLoaded = true;
      return state;
    }

Презентационная компонента (полная):

import React from 'react';
import MasonryInfiniteScroller from 'react-masonry-infinite';
import s from './MainAuthorized.module.scss';

const MainAuthorized = props => {
  // debugger;
  return (
    <main>
      <MasonryInfiniteScroller
        hasMore={false}
        loadMore={props.fetchMoreData}      
      >

        {props.photos}

      </MasonryInfiniteScroller>

      <button className={s.main__moreCats}>More cats!</button>
    </main>
  );
};

export default MainAuthorized;