I am trying to create ajax calls using information from countries but when I run the program it sends me the next error:"Uncaught TypeError: Cannot read properties of undefined (reading 'name') at XMLHttpRequest. (script.js:25)"

My Javascript code is the next one:

const request = new XMLHttpRequest();

request.open('GET', 'https://restcountries.com/v3.1/name/taiwan')
request.send();

request.addEventListener('load', function(){
  // console.log(this.responseText)
  const [data] = JSON.parse(this.responseText)
  console.log(data);

  const html= `<article class="country">
    <img class="country__img" src="${data.flags.svg}" />
    <div class="country__data">
      <h3 class="country__name">${data.name.common}</h3>
      <h4 class="country__region">${data.region}</h4>
      <p class="country__row"><span>👫</span>${(+data.population/1000000).toFixed(1)}</p>
      <p class="country__row"><span>🗣️</span>${data.languages[0]}</p>
      <p class="country__row"><span>💰</span>${data.currencies[0].name}</p>
    </div>
  </article>`;

  countriesContainer.insertAdjacentHTML('beforeend', html)
  countriesContainer.style.opacity = 1;
});