How to prevent react-carousel from adapting to image size?

Demo of site: https://jozesuhadolnik.netlify.com/portreti

At the above page I'm using react-carousel to display images and give the user the ability to cycle through them. Every time there is a transition to the next image the entire container responds to the size of the image which causes this weird flickering. How can I force the container to be of a fixed size? I've tried changing every container style to no effect.

Site is made with GatsbyJS. Below are the files which are used for the Project page.

project.js

import React from 'react'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
import styled from 'styled-components'

import { Layout, ProjectHeader, ProjectPagination, SEO, Gallery, SideBar } from '../components'
import config from '../../config/site'

const BG = styled.div`
  background-color: ${props => props.theme.colors.bg};
  position: relative;
`

const OuterWrapper = styled.div`
  padding: 0 ${props => props.theme.contentPadding};
  margin: -10rem auto 0 auto;
`

const InnerWrapper = styled.div`
  position: relative;
  max-width: ${props => `${props.theme.maxWidths.project}px`};
  margin: 0 auto;
`

const Project = ({ pageContext: { slug, prev, next }, data: { project: postNode, images } }) => {
  const project = postNode.frontmatter

  return (
    <Layout customSEO id="outer-container">
      <SideBar right outerContainerId="outer-container" />
      <SEO postPath={slug} postNode={postNode} postSEO />
      <ProjectHeader
        name={config.name}
        date={project.date}
        title={project.title}
        areas={project.areas}
        text={postNode.body}
      />
      <BG>
        <OuterWrapper>
          <InnerWrapper>
            <Gallery images={images.nodes} text={postNode.body} />
          </InnerWrapper>
          <ProjectPagination next={next} prev={prev} />
        </OuterWrapper>
      </BG>
    </Layout>
  )
}

export default Project

Project.propTypes = {
  pageContext: PropTypes.shape({
    slug: PropTypes.string.isRequired,
    next: PropTypes.object,
    prev: PropTypes.object,
  }),
  data: PropTypes.shape({
    project: PropTypes.object.isRequired,
    images: PropTypes.object.isRequired,
    allMdx: PropTypes.shape({
      nodes: PropTypes.array.isRequired,
    }),
  }).isRequired,
}

Project.defaultProps = {
  pageContext: PropTypes.shape({
    next: null,
    prev: null,
  }),
}

export const pageQuery = graphql`
  query($slug: String!, $absolutePathRegex: String!) {
    images: allFile(
      filter: {
        absolutePath: { regex: $absolutePathRegex }
        extension: { regex: "/(jpg)|(png)|(tif)|(tiff)|(webp)|(jpeg)/" }
      }
      sort: { fields: name, order: ASC }
    ) {
      nodes {
        name
        childImageSharp {
          fluid(maxWidth: 1600, quality: 90) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
    allMdx {
      nodes {
        fields {
          slug
        }
      }
    }
    project: mdx(fields: { slug: { eq: $slug } }) {
      body
      excerpt
      parent {
        ... on File {
          mtime
          birthtime
        }
      }
      frontmatter {
        cover {
          childImageSharp {
            resize(width: 800) {
              src
            }
          }
        }
        date(formatString: "DD.MM.YYYY")
        title
        areas
      }
    }
  }
`

Gallery.js carousel component:

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { MDXRenderer } from 'gatsby-plugin-mdx'

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

const GalleryWrapper = styled.div`
  .image-gallery {
    max-width: 700px;
    max-height: 650px;
    margin: 3rem auto;
  }
  .image-gallery-image {
    text-align: center;
    background: #383838;
  }
`

const Text = styled.div`
  max-width: 450px;
  margin: 1rem auto;
  padding-top: 1rem;
  color: white;
`

const Gallery = ({ images, text }) => {
  const items = images.map(item => {
    return {
      original: item.childImageSharp.fluid.src,
      thumbnail: item.childImageSharp.fluid.src,
    }
  })
  return (
    <GalleryWrapper>
      {text && (
        <Text>
          <MDXRenderer>{text}</MDXRenderer>
        </Text>
      )}
      <ImageGallery items={items} />
    </GalleryWrapper>
  )
}

export default Gallery

Gallery.propTypes = {
  images: PropTypes.array.isRequired,
  text: PropTypes.string.isRequired,
}