Render images from flickr api url using react-gallery component from npm

Solution for Render images from flickr api url using react-gallery component from npm
is Given Below:

New here. Trying to use flickr api url, and react-image-gallery npm component to render images to a carousel. I am getting an axios get response but canstrong text’t seem to render. I have expended my beginner abilities and don’t know where else to look. Save the newbie roasting for later.

import React, { useEffect, useState } from 'react'
import ImageGallery from 'react-image-gallery'
import './css/ImgCarousel.css'
import axios from 'axios'

const ImgCarousel = () => {
    const URL = "///flick api url with keys here"
    const [photos, setPhotos] = useState([])

    useEffect(() => {
        axios.get(URL)
        .then(({data}) => {
            if (data.length) {
                setPhotos(data)
            }
        })
        .catch(err => {
            console.log(err)
        })
    }, [])

    return (
        <>
          {photos && photos.map((photo) => {
              return <ImageGallery key={photo.id} items={photos}/>
          })}
        </>
    ) 
}

export default ImgCarousel