I would like to know how I can make an API arrangement appear directly in my HTML body, because when I try to do it it returns [object, object]

This is the array in console:

code: "IT" confirmed: 12134286, country: "Italy" , critical: 343 , deaths: 754169

This is my code:

const body = document.querySelector('body')
const button = document.querySelector('.button')

const result = () => {
  fetch("https://covid-19-data.p.rapidapi.com/country/code? 
  code=it", {
  "method": "GET",
  "headers": {
     "x-rapidapi-host": "covid-19-data.p.rapidapi.com",
      "x-rapidapi-key": "596ab7b883msh9846bfe9508ejsn1508f3534ee0"
  }
})
       .then(response => response.json())
       .then(data => {
         data.forEach(result => {
          console.log(result)
          const h2 = document.createElement('h2')
          h2.innerHTML = result
          body.appendChild(h2)
        })

     .catch(err => {
       console.error(err);
     });
    }

 button.addEventListener('click', () =>{
  result();
})