How to print array data using map method in React JS?

Hello Community I am stuck at some point I am new at React JS. I want to call image file using map function. Only images not appear on the webpage.

Here is my Array.jsx file

const PhotoData = [
   
        {
            imgsrc: gallery_1
        },
        {
            imgsrc: gallery_4
        },
        {
            imgsrc: gallery_7
        },
        {
            imgsrc: gallery_10
        }
    ]

    const PhotoData1 = [
   
        {
            imgsrc: gallery_2
        },
        {
            imgsrc: gallery_6
        },
        {
            imgsrc: gallery_8
        },
        {
            imgsrc: gallery_12
        }
    ]

    const PhotoData2 = [
   
        {
            imgsrc: gallery_3
        },
        {
            imgsrc: gallery_5
        },
        {
            imgsrc: gallery_9
        },
        {
            imgsrc: gallery_11
        }
    ]

    export default [PhotoData,PhotoData1,PhotoData2];

also import the gallery images on above the code.

Here is my photos.jsx file where I write the code.

<div className='photo__header-grid'>
                <div className='grid-item'>
                    {
                        PhotoData.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>
                                    <img src={val.imgsrc} alt="gallery_1"/>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <div className='photo__header-grid-1'>
                <div className='grid-item'>
                {
                        PhotoData1.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>
                                    <img src={val.imgsrc} alt="gallery_1"/>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <div className='photo__header-grid-2'>
                <div className='grid-item'> 

                    {
                        PhotoData2.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>
                                    <img src={val.imgsrc} alt="gallery_1"/>
                                </div>
                                )
                            })
                    }
                </div>
            </div>

Images not appear on the web-page.
Thanks in advance.