Рендеринг данных с сервера

Коллеги, помогите, пожалуйста, решить проблему. Есть простая вёрстка из 6-ти карточек. В каждую из них нужно отрисовать данные получаемые от сервера. У меня получается отрисовать либо в последнюю карточку, либо в каждой из них рендерится undefined.

HTML

  <section class="property">
      <header class="header">
          <h1 class="property-title">
              Our Latest Developments
          </h1>
      </header>
      <div class="property-search">
          <span class="filter">Filter</span>
          <input type="text" name="filter" id="filter">
      </div>
      <main class="property-body">
              <div class="property-item">
                  <div class="property-item property-item--image">
                      <img class="image" src="./src/img/tabs/Image1.jpg" alt="image">
                      <div class="property-type">Independed living</div>
                  </div>
                  <a class="link" href="http://details/[id].html"></a>
              </div>
              <div class="property-item">
                  <div class="property-item property-item--image">
                      <img class="image" src="./src/img/tabs/Image2.jpg" alt="image">
                      <div class="property-type">Independed living</div>
                  </div>
                  <a class="link" href="http://details/[id].html"></a>
              </div>
              <div class="property-item">
                  <div class="property-item property-item--image">
                      <img class="image" src="./src/img/tabs/Image3.jpg" alt="image">
                      <div class="property-type support">Restaurant & Support available</div>
                  </div>
                  <a class="link" href="http://details/[id].html"></a>
              </div>
              <div class="property-item">
                  <div class="property-item property-item--image">
                      <img class="image" src="./src/img/tabs/Image1.jpg" alt="image">
                      <div class="property-type">Independed living</div>
                  </div>
                  <a class="link" href="http://details/[id].html"></a>
              </div>
              <div class="property-item">
                  <div class="property-item property-item--image">
                      <img class="image" src="./src/img/tabs/Image2.jpg" alt="image">
                      <div class="property-type">Independed living</div>
                  </div>
                  <a class="link" href="http://details/[id].html"></a>
              </div>
              <div class="property-item">
                  <div class="property-item property-item--image">
                      <img class="image" src="./src/img/tabs/Image3.jpg" alt="image">
                      <div class="property-type support">Restaurant & Support available</div>
                  </div>
                  <a class="link" href="http://details/[id].html"></a>
              </div>
      </main>

JS

const resource = 'https://603e38c548171b0017b2ecf7.mockapi.io/homes';

async function getResource () {
    const res = await fetch(resource);
    
    if(!res.ok) {
        throw new Error(`Could not fetch ${url}, status: ${res.status}`);
    }

    let content = await res.json();
    
    content = content.slice(0, 6);
    
    const card = document.querySelectorAll('.property-item')
    
    const cardInfo = document.createElement('div');
    cardInfo.classList.add('property-card--info');
    
    for (let key in content) {
        cardInfo.innerHTML = `
            <h2 class="property-item property-item--description">${content[key].title}</h2>
             <div class="property-item property-item--adress">${content[key].address}</div>
             <div class="property-item property-item--price">New Properties for Sale from <strong>${content[key].price}</strong></div>
             <br>
             <div class="property-item property-item--ownership">Shared Ownership Available</div>
        `;
    };
        card.forEach(item => item.append(cardInfo))
    }

    getResource(resource)