Erreur undefined DOM JS

Rico59
Javascript

Bonjour,
J'ai un projet de cours avec du code qui m'a déjà était donné (il faut au maximum que je garde le form-factor je sais que l'on peut faire plus simple sans async et await mais je dois faire comme cela
Je cherche à avoir les images des photographes sur ma page
les images sont bien récup avec fetch() et ma fonction getUserCardDom avec displayData me crée bien ce que je veux mais le soucis c'est que j'ai un undefined qui s'affiche au lieu de mes tableaux
Pour moi le soucis viens de photographerModel et userCardDom mais je n'arrive pas à déduire pourquoi ?

Je vous mets un codepen ici
https://codepen.io/Christopher_Hardeman/pen/yLvxPVq?editors=1010


  function getUserCardDOM() {
    let photographerList = "";
    photographerList += `<article>
    <a href="./photographers.html">
    <img src="${picture}"> </img>
    <h2 alt="${name}">${name}</h2> 
    </a>
    <h3>${city}</h3>
    <p> ${tagline}</p>
    <p>${price} </p>
    </article>`;
  }
  return {getUserCardDOM};
}

async function displayData(photographers) {
  const photographersSection = document.querySelector(".photographer_section");
  photographers.forEach((photographer) => {
    const photographerModel = photographerFactory(photographer);
    const userCardDOM = photographerModel.getUserCardDOM();
    photographersSection.innerHTML = userCardDOM;
    console.log(photographerModel)
    console.log(userCardDOM);
  });
}

Ce que je veux

Le tableau qui s'affiche bien dans le DOM comme prévu

Ce que j'obtiens

une erreur undefined sans plus d'infos sur la console, userCardDom me renvoie undefined

Aucune réponse