如何在 react 中使用 react-multi-carousel 显示横幅图片？

如何解决如何在 react 中使用 react-multi-carousel 显示横幅图片？

我正在使用 react-multi-carousel 包开发 react 应用程序。我正在尝试从 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 中提取图像时。它不工作并在屏幕上给我一个错误。

任何帮助将不胜感激