I am facing problem for declaring an object from Online API and getting 404 error msg! How to sort out this problem

'use strict';

const btn = document.querySelector('.btn-country');
const countriesContainer = document.querySelector('.countries');

///////////////////////////////////////
const getCountryData = function (country) {
  const request = new XMLHttpRequest();
  request.open('GET', `https://restcountries.com/v3.1/name/${country}`);
  request.send();
  request.addEventListener('load', function () {
    const [data] = JSON.parse(this.responseText);
    console.log(data);
    const html = ` <article class="country">
<img class="country__img" src="${data.flag}" />
<div class="country__data">
  <h3 class="country__name">${data.name}</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}</p>
  <p class="country__row"><span></span>${data.currencies}</p>
</div>
</article>`;
    countriesContainer.insertAdjacentHTML('beforeend', html);
    countriesContainer.style.opacity = 1;
  });
};
getCountryData('portugal');
getCountryData('usa');
getCountryData('pakistan');

I am facing the problem by declaring the object for example the name object{name:} as well as language{} object and currencies{} object I don't know how to declare these objects in html. Will please someone can solve my problem I am getting 404 error and don't know how to fix them I only get population and regional information and don't get any other information like flag, currencies, and country name instead of that I get only [object object] on the page and In the console I get the error 404 page not found. Please help me to solve this problem