При загрузке на странице должно быть 6 карточек из массива с описанием и ссылкой на картинку, которые добавит JavaScript,

Собственно, есть верстка страницы, на которую при загрузке должны добавляться 6 карточек с картинкой и описанием из заданного массива (далее предполагается, что пользователь сможет сам добавлять фото и описание, но пока нужно заполнить страницу "по умолчанию").

Я написал template карточки для добавления на страницу. Далее будет добавлен еще функционал, но пока меня интересует только заполнение grid-element__image и grid-element__title из заданного массива через JS:

<template id="place-template">
      <article class="grid-element">
        <button class="grid-element__trash" type="button"></button>
        <img class="grid-element__image" src="./images/dombai.jpg" alt="фотография церкви">
        <div class="grid-element__description">
          <h2 class="grid-element__title"></h2>
          <button class="grid-element__emoji" type="button" aria-label="like">
          </button>
        </div>
      </article>
    </template>

И написал js, который на данный момент добавляет 12 карточек: 6 с описанием и без картинки и 6 с картинками и без описания. Я понимаю, почему так происходит, но не пойму, как объединить в одну функцию и слить в 6 карточек и с фото и с описанием:

const initialCards = [
  {
    name: 'Архыз',
    link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
  },
  {
    name: 'Челябинская область',
    link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg'
  },
  {
    name: 'Иваново',
    link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg'
  },
  {
    name: 'Камчатка',
    link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg'
  },
  {
    name: 'Холмогорский район',
    link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg'
  },
  {
    name: 'Байкал',
    link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg'
  }
];

let popupPictures = document.querySelector('.popup_pictures');
let popupPicturesCloseButton = popupPictures.querySelector('.popup_pictures__close-button');
let popupPicturesOpenButton = document.querySelector('.profile__add-button');
const card = document.querySelector('.grid-element');
const placesContainer = document.querySelector('.elements');
const placeAddButton = popupPictures.querySelector('.form__button');
const placeTemplate = document.querySelector('#place-template').content;

const placeName = initialCards.map(item => item.name);
const placeLink = initialCards.map(item => item.link);


function render() {
  placeName.forEach(renderName);
  placeLink.forEach(renderLink);
};


function renderName(name) {
    const placeElement = placeTemplate.querySelector('.grid-element').cloneNode(true);
    placeElement.querySelector('.grid-element__title').textContent = name;
  
    placesContainer.prepend(placeElement);
}

function renderLink(link) {
  const placeElement = placeTemplate.querySelector('.grid-element').cloneNode(true);
  placeElement.querySelector('.grid-element__image').src = link;

  placesContainer.prepend(placeElement);
}


render();

Уважаемые знатоки, подскажите и объясните:

1. необходимо ли использовать метод map или каким то образом можно обойтись только forEach?
2. как сделать так, чтоб добавилось 6 полноценных карточек на страницу???
3. оч прошу дать ответ без использования стрелочных функций, их еще не освоил как надо:)