reactjs - How to display banner images using react-multi-carousel in react?

Question

I'm working on react app with react-multi-carousel package. I'm trying to get the banner images from an api and display those inside grid.

But not able to make it work

Here is my code.

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>
    )
}

If i create multiple div inside Carousel component , it is working fine. But when i try to pull the images from api. it is not working and giving me an error on screen.

Any help would greatly thankfull