Loading dynamic images (fetched using API) in 'react-grid-carousel' React

Question

I use 'react-grid-carousel' and it perfectly fits my requirements.

However I realized that the demo examples provided by this uses static images.

In my case, I want to load images in Carousel, that I'm fetching using API at runtime.But somehow my images are not placed in carousel.

import React, {useState, useEffect} from 'react'
import axios from 'axios';
import '../styles/Container.css';
import {Link, NavLink} from "react-router-dom";
import Carousel from 'react-grid-carousel'
const ContactCo = (props) => {

    const [posts, setPosts] = useState([])

    useEffect(() => {
    setPosts(props.posts)
    },[props.posts])

    const renderData = () => {
        let x = []
        const myData =  posts.map((ele) => {
            ele.caption.includes("#aboutloeildemelie") && ele.children.data.map((item) => {
              x.push(
               <>
                 
                <div>
                <Carousel cols={2} rows={1} gap={10} loop>
                    <Carousel.Item>
                    <img className="container_img" src={item.media_url} />
                    <p className="co_caption" key={ele.id}>{ele.caption.split(' ').slice(1).join(' ')}</p>
                    </Carousel.Item>

                </Carousel>
                 </div>
                
                </>
                 )
            })
        })
    
        return x;
    }
    return (
    
    <div className="menu_item">
         {renderData()}
    </div>
   
    )
}

    export default ContactCo;