In the code, I have fetched data from the backend through axios. I want to display the cloudinary product gallery dynamically from the public IDs fetched from the database. I used the cloudinary documentation for the product gallery code. In the axios get method I get a json object which has "sampleimg" array which contain the public Ids, and I have set that json object to the data state. In the current code I have mapped the "sampleimg" array inside the mediaAssets method but it gives me this error code.Uncaught (in promise) Error: 🌧🌧🌧 Cloudinary Product Gallery Configuration: one or more of your configuration values are not valid: 🌧🌧🌧an error with the definition of your media asset Please help me with this error.

import React, { Component } from 'react';
import axios from 'axios';

class Details extends Component {
state = { 
    data: { }
 } 

async componentDidMount(){
    let data = await axios.get('/admin/movies')
    let lands = [...data.data]
    let land = lands.find(l => l._id === this.props.match.params.id)
    this.setState({data: land})

    const mywidge = window.cloudinary.galleryWidget({
        container: "#my-gallery",
        cloudName: 'CLOUDENAME',
        mediaAssets:[ 
            this.state.data.sampleimg.map(id => (
                {
                    publicId: id,
                    mediaType: "image"
                }
            ))
         ],
         zoom: false, 
         transition: "fade",
         carouselStyle: 'none',
         
    });
    mywidge.render()
}

render() { 
    return (
        <div style={{paddingTop: '80px'}}>
        <div id='my-gallery'>
            
        </div>
        </div>
    );
}

}

export default Details;