I created two createCardNote function First one pull data information from the state.countries Second is from state.borders

in the createCountryCardNode, console.log(cardDiv) has value thus can be seen in the console

However, createBorderCardNode, console.log(borderDiv) has no value at all

Both codes are the same why has different outcomes?

function createCountryCardNode(country) {
const cardDiv = document.createElement('div');
cardDiv.className = 'country';

cardDiv.innerHTML = `
<img class="country__img" src="${country.flag}" />
<div class="country__data">
  <h3 class="country__name">${country.name}</h3>
  <h4 class="country__region">${country.region}</h4>
  <p class="country__row"><span>👫</span>${country.population}</p>
  <p class="country__row"><span>🗣️</span>${country.languages[0].name}</p>
  <p class="country__row"><span>💰</span>${country.currencies[0].name}</p>
</div>`;

console.log(cardDiv);
return cardDiv;
}

function createBorderCardNode(border) {
const borderDiv = document.createElement('div');
borderDiv.className = 'country';

// console.log(border.flags.svg);
// console.log(border.name.common);
// console.log(border.region);
// console.log(border.population);
// console.log(border.languages[0].name);

borderDiv.innerHTML = `
<img class="country__img" src="${border.flags.svg}" />
<div class="country__data">
  <h3 class="country__name">${border.name.common}</h3>
  <h4 class="country__region">${border.region}</h4>
  <p class="country__row"><span>👫</span>${border.population}</p>
  <p class="country__row"><span>🗣️</span>${border.languages[0].name}</p>
  
</div>
`;

console.log(borderDiv);
return borderDiv;
}