Como estás poniendo la promesa dentro del jsx no funciona. Así que lo que hice fue justo cuando obtengo los datos, obtener la imagen, luego concatenar los objetos de respuesta y ya al final modificar el estado del componente. import React, { useState, useEffect } from "react"; const Inicio = () => { const [pokemons, setPokemons] = useState([]); const url = "https://pokeapi.co/api/v2/pokemon?limit=15&offset=100"; const getimg = async (pkmnurl) => { try { let res = await fetch(pkmnurl); let data = await res.json(); return data.sprites.back_default; } catch (e) { console.log(e); } }; useEffect(() => { fetch(url) .then((res) => res.json()) .then(async (data) => { for (var i = 0; i < data.results.length; i++) { const img = await getimg(data.results[i].url); Object.assign(data.results[i], { url: img, }); } setPokemons(data.results); }) .catch((e) => console.log(e)); }, []); return ( <div> {pokemons.map((pokemon) => { return ( <div key={pokemon.name}> {pokemon.name} <img src={pokemon.url} alt={pokemon.name} /> </div> ); })} </div> ); }; export default Inicio;