Tengo una variedad de objetos. Cada objeto es un perfil de un perro que incluye el nombre, la raza, etc. Quiero poder mapear a través de la matriz, obtener la raza del perro y llamar a una API para obtener una imagen aleatoria de esa raza. A continuación se muestra una parte de mi código React que probé (y fallé). Según tengo entendido, no funciona porque useEffect solo llamará una vez aunque esté mapeando a través de la matriz. ¿Es posible llamar para cada raza que mapeo?

 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} /> ) })