The Output displays info of only one pet. I have checked my code several times but I can't seem to find any error.

const pets = [
  {
    name: 'Joey',
    type: 'Dog',
    breed: 'Australian Shepherd',
    age: 8,
    photo: 'img/aussie.jpg'
  },
  { 
    name: 'Patches',
    type: 'Cat',
    breed: 'Domestic Shorthair',
    age: 1,
    photo: 'img/tabby.jpg'
  },
  { 
    name: 'Pugsley',
    type: 'Dog',
    breed: 'Pug',
    age: 6,
    photo: 'img/pug.jpg'
  },
  { 
    name: 'Simba',
    type: 'Cat',
    breed: 'Persian',
    age: 5,
    photo: 'img/persian.jpg'
  },
  { 
    name: 'Comet',
    type: 'Dog',
    breed: 'Golden Retriever',
    age: 3,
    photo: 'img/golden.jpg'
  }
];

let html = '';

for (let i = 0; i < Object.keys(pets).length; i++) {
  html = `
    <h2>${pets[i].name}</h2>
    <h3>${pets[i].type} | ${pets[i].breed}</h3>
    <p>${pets[i].age}</p>
    <img src="${pets[i].photo}" alt="${pets[i].breed}">
  `;
}

document.querySelector('main').insertAdjacentHTML('beforeend', html) ;