【Gatsby】react-image-galleryでページが表示されないエラーが発生する

Question

Gatsbyでreact-image-galleryを導入しました。
表示自体は問題なくされるのですが、Unhandled Runtime Errorが出てページの表示ができない時があります。（真っ白になります）
下記エラー内容になります。

One unhandled runtime error found in your files. See the list below to fix it:

Error in function eval in ./node_modules/react-image-gallery/build/image-gallery.js:1

Cannot read property 'originalClass' of undefined

./node_modules/react-image-gallery/build/image-gallery.js:1

MarkDownファイルから外部アップローダーから画像はを取得しています。

gallery:
  - image: https://ucarecdn.com/decd81bb-1a82-4b39-ac39-b14c5f6bfaac/
    alt: bookends-coffee-service_shop
  - image: https://ucarecdn.com/56ab0a97-79d5-4aa3-af03-e1730a5ecb2b/
    alt: bookends-coffee-service_coffee

スライダーを導入しているコンポーネント

import React, { Component, Fragment } from 'react'
import ImageGallery from 'react-image-gallery'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'

import 'react-image-gallery/styles/css/image-gallery.css'

export const query = graphql`
  fragment Gallery on MarkdownRemark {
    frontmatter {
      gallery {
        alt
        image
        title
      }
    }
  }
`

export default class Gallery extends Component {
  state = {
    loaded: false,
    sliderImages: [],
    index: 0
  }

  getImageInfo = (img, index) =>
    fetch(img.image + '-/json/')
      .then(res => res.json())
      .then(
        result => {
          const newImagesArr = [...this.state.sliderImages]
          newImagesArr[index] = {
            original: img.image,
            originalAlt: img.title,
            thumbnail: img.image,
            thumbnailAlt: img.title
          }
          this.setState({
            sliderImages: newImagesArr
          })
          return true
        },
        error => {
          console.log(error)
          return false
        }
      )

  componentDidMount() {
    const { images } = this.props,
      maxCount = images.length
    let loopCount = 1

    for (let i in images) {
      if (this.getImageInfo(images[i], i)) {
        this.setState({ loaded: loopCount === maxCount })
        loopCount++
      }
    }
  }

  render() {
    const properties = {
      lazyLoad: true,
      showNav: false,
      showPlayButton: false,
      showFullscreenButton: false
    }
    return (
      <Fragment>
          <div>
          <ImageGallery
            items={this.state.sliderImages}
            {...properties}
          />
          </div>
      </Fragment>
    )
  }
}

Gallery.propTypes = {
  images: PropTypes.array.isRequired
}

憶測ですが、画像取得のループ処理で問題があるのかと思っています。
何か解決方法などご教授頂けますと幸いです。