Populating html from data object with vanilla JS

Forgive me if this is redundant, I'm having trouble finding questions/answers that are using vanilla JS specifically.

I have a data object for store items I've created that I'm trying to display on the page but I only seem to be getting the first item in the array to appear, which lead me to believe I needed some sort of for loop related to the array length but I tried variations and I seem to be getting the same result (only the first item), or in some cases nothing at all.

I've logged out the HTML and the correct items are there in the console so its working and they are ready to go. I'm missing something.

feature = () => isFeatured.map(item => {
  // console.log("imworking");
  html = `
      <img src="${item.image}" alt=""> 
      <h2>${item.info}</h2>
      <h3>${item.price}</h3>
      <button>Add to Cart</button>
        `
  //console.log(html);
  document.getElementById('featuredItem').innerHTML = html;
})

I don't think the problem is the HTML because the one item is displaying fine but here it is anyways

<div id="featuredItem"></div>