Изображение из API не отображается в ReactJs

Я столкнулся с проблемой, когда я пытаюсь получить данные из API и отобразить их обратно. API отвечает URL-адресом изображений, подобных этому https://dazelpro.com/files/images/hanzo.jpg. Как я могу решить эту проблему. Ниже также я прикрепляю свой код реакции

Получить запрос

const kambing = () => {
axios
.get(`https://api.dazelpro.com/mobile-legends/hero/${id}`)
.then(function (response) {
console.log(`view by id: `, response.data);
setHeroes(response.data.hero);
})
.catch((error) => console.error(`Error: ${error}`));
};


Тег изображения

<img src={hero.hero_avatar} width="50%" height="100%" />


ответ API

Решение проблемы

используйте функцию карты для перебора героя, потому что response.data.hero является объектом массива, а не отдельным объектом.