reactjs - 反応で反応マルチカルーセルを使用してバナー画像を表示するには?

Question

react-multi-carousel パッケージを使用して反応アプリに取り組んでいます。API からバナー画像を取得し、それらをグリッド内に表示しようとしています。

しかし、それを機能させることはできません

これが私のコードです。

export default function OfferBanner() {

    const classes = useStyles()
    const banners = useSelector(state => state.home.banners)
    const dispatch = useDispatch();
    
    useEffect(() => {
        dispatch(loadBanners())
    }, [])

    console.log(banners.bannersList)

    let CorouselData = banners.bannersList && banners.bannersList.forEach((img) => {
      return <Grid item xs={12}>
            <img style={{ width: '90%' }} src={`https://images.mrmusllah.com/banners/${img}`} alt="" />   
         </Grid> 
    })

    // let banner1 = banners.bannersList[0];
    
    return (
        <section >
            <Container maxWidth="md">
              <Grid container spacing={3}> 
                  <Carousel
                      swipeable={false}
                      draggable={false}
                      responsive={responsive}
                      infinite={true}
                      autoPlay={true} 
                      containerClass="carousel-container"
                      autoPlaySpeed={3000}
                      >
                      <CorouselData />
                  </Carousel>
              </Grid>
            </Container>    
          </section>
    )
}

Carousel コンポーネント内に複数の div を作成すると、正常に動作します。しかし、APIから画像を取得しようとすると. 機能せず、画面にエラーが表示されます。

どんな助けでも大いに感謝します