React Masonry Component

import React ,{useEffect, useState} from 'react';
import Masonry from 'react-masonry-component';
import axios from 'axios'
import CardStyle from './CardStyle';
// console.log(Masonry)
const Image = () => {
    const [img, setImg] = useState([])
    useEffect(()=>{
        const url = ' http://localhost:8000/create-product';
        axios.get(url)
        .then(res=>setImg(res.data))
        .catch(e=>console.log(e))
    },[])
    
    console.log(img)
    const masonryOptions ={transitionDuration :0}
    const imagesLoadedOptions = {background: '.my-bg-image-el'}
    const imageGallery = img.map((v)=>{
        return <CardStyle
            key = {v._id}
            image = {v.image}
            title = {v.title}
            DiscountPrice = {v.DiscountPrice}
        />
    })
    
  return (
        <>
            <h1>hello this is home page</h1>
            <div className="container">
            <Masonry
                className={'my-gallery-class'}
                elementType={'ul'}
                options={masonryOptions}
                disableImagesLoaded={false}
                updateOnEachImageLoad={false}
                imagesLoadedOptions={imagesLoadedOptions}
            >
                {imageGallery}
            </Masonry></div>
        </>
    )
};
export default Image;