I have an array of objects. Each object is a profile of a dog including name, breed, etc. I want to be able to map through the array, get the breed of dog, and call out to an API for a random image of that breed. Below is a portion my React code that I tried (and failed). To my understanding, it's not working because useEffect only will call out once even though I'm mapping through the array. It is possible to call out for each breed I map through?

    const urlDogBase = "https://dog.ceo/api/breed/"
    const urlEnding = "/images/random"
    const [dogImage, setDogImage] = useState({})

    let availableDogs = DogData.map((dog,index) => {
        const dogUrl = dog.breed
        const fullUrl = `${urlDogBase}${dogUrl}${urlEnding}`

        useEffect(()=>{ 
            fetch(fullUrl)
              .then((response) => response.json())
              .then((data) => setDogImage(data.message))
              .catch(() => console.log("oops error"));
          }, []);

        return(
            <img src={dogImage} />
        )
    })