DOM: вставить элемент массива

С помощью JS необходимо создать div и вставить в него название героя, картинки и описание.

Имя героя, картинки и описание хранятся в виде объекта в массиве heroBase:

 const heroBase = [
  {
    name: 'Hero 1',
    bio: `This is a Hero 1 description`,
    path: './img/hero1.png'
  },
  {
    name: 'Hero 2',
    bio: `This is a Hero 2 description.`,
    path: './img/hero2.png'
  },
] 

Создаю div и передаю туда нулевой элемент массива heroBase:

let body = document.querySelector("body");
let hero1 = document.createElement("div");
hero1.className = "card";
hero1.innerText = heroBase[0]; // вот тут он мне выдает "object Object"
body.append(hero1);

Вместо имени героя, картинки и описания получаю "object Object".
Как сделать так, чтобы отображались имя героя, картинки и описание?