Estoy tratando de crear llamadas ajax usando información de países, pero cuando ejecuto el programa me envía el siguiente error: "Error de tipo no detectado: no se pueden leer las propiedades de undefined (leyendo 'nombre') en XMLHttpRequest. (script.js: 25)"

Mi código Javascript es el siguiente:

 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; });