Отзывчивый Карусель React material-ui

Question

Я пытаюсь создать сайт музыкального тура, используя React material-ui. Мне бы хотелось, чтобы веб-сайт выглядел следующим образом: https://www.oddfantastic.com/

Я новичок в React, после просмотра библиотек, таких как bootstrap и material-ui, и решил придерживаться Material-UI. Прямо сейчас я застрял на первой странице со скользящими изображениями. Я пробовал разные способы получить результат первой страницы вышеупомянутого сайта, но пока не повезло. Я начал использовать сетку и карты, и теперь я пробую список сетки. Вот мой код:

import Slide from '@material-ui/core/Slide';
import React, { Component } from 'react'
import { Grid, Card, CardContent, CardMedia, Typography } from '@material-ui/core';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import { Carousel, CarouselSlide } from 'material-ui-carousel'

export default class App extends Component {
pictures = [
    {imagel: './images/radio7-2-1.png', imager: './images/radio7-2-2.png', title: 'r7-2'},
    {imagel: './images/radio7-3-1.png', imager: './images/radio7-3-2.png', title: 'r7-3'},
    {imagel: './images/masterphil-1.png', imager: './images/masterphil-2.png', title: 'mp'},
    {imagel: './images/vito-1.png', imager: './images/vito-2.png', title: 'vito'},
  ];

render () {
    return (
// <Grid container justify="center" spacing={0}>
  /* {[0, 1].map(value => (
    <Grid key={value} item> */
      <Carousel>
        {this.pictures.map(({ imagel, imager, title }) => (
        <CarouselSlide key={title}>
           <GridList cellHeight={160} cols={2}>
             <GridListTile key={title} style={{ height: 'auto' }}>
               <img src={imagel} alt={title} />
             </GridListTile>
           </GridList>
          {/* <Card width="100%" key={title}>
            <CardMedia
              image={imagel}
              title={title}
              style={{
              height: 0,
              width: '50%',
              paddingTop: '75%',
              }}
            />
            <CardMedia
              image={imager}
              title={title}
              style={{
              height: 0,
              width: '50%',
              paddingTop: '75%',
              }}
            />
            <CardContent>
              <Typography>{title}</Typography>
            </CardContent>
          </Card> */}
        </CarouselSlide>
        ))}
      </Carousel>

    /* </Grid>
  ))}
</Grid> */

)
}
}

Вот полученный результат:

Похоже, что все изображения появляются одновременно.

Поскольку мои знания действительно очень ограничены, мне интересно, выбрал ли я правильную библиотеку. Тем более, что я не смог найти компонент Material-UI, позволяющий достичь того, чего я хочу.

Любой совет или направление было бы замечательно. Спасибо