Javascript outputting an error in the console when trying to display some html code when the promise has succeeded

Question

I am trying to chain two promises and after the second promise has succeeded I am trying to output the result into an html element which I am creating through my javascript file. I am able to run the two promises without any issues but I am getting this error at the end "Cannot read properties of null (reading 'insertAdjacentHTML')"

I am expecting for the function renderCountry to work properly, and render the country into my html code but every time I run it I am getting this error Cannot read properties of null (reading 'insertAdjacentHTML') try again

'use strict';
/* this is a real html container, I am going to need it becasue I am going to attach  and html element generated from a function */
const countrycontainer = document.querySelector('.countries');
let country;

/* This function is supposed to render this html div element into the html file */
const renderCountry = function (data, className = '') {
  const html = `
      <div 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)} people</p>
        <p class="country__row"><span>️</span>${data.languages[0].name}</p>
        <p class="country__row"><span> Native Name ️ </span>${
          data.languages[0].nativeName
        }</p>
        <p class="country__row"><span></span>${data.currencies[0].name}</p>
      </div>
    </div>`;

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

const whereAmI = function (lat, lng) {
  // First call with lat and long
  fetch(
    `https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}9&longitude=${lng}&localityLanguage=en`
  )
    .then(response => {
      console.log(response);
      // if the cords are not okay throw error
      if (!response.ok)
        throw new Error(`${response.status} this coordenates are not okay`);

      return response.json();
    })
    .then(data => {
      //   console.log(data);
      console.log(data);
      console.log(`You are in ${data.city}, ${data.countryName}`);
      // Second call based on the first result
      return fetch(`https://restcountries.com/v2/name/${data.countryName}`)
        .then(response => {
          if (!response.ok)
            throw new Error(
              `${data.status} OOPS THIS IS NOT A COUNTRY TRY AGAIN`
            );
          return response.json();
        })
        .then(data => {
          console.log('the value of data is');
          console.log(data);
          renderCountry(data[0]);
        });
    })
    .catch(error => {
      console.log(`${error} try again`);
    });
  // .finally(() => {
  //   countrycontainer.style.opacity = 1;
  // });
};



whereAmI(4.57, -74.2973);
whereAmI(37.98381, 23.727539);