Using .map() method to render array items into their own separate divs, but comma is still displaying?

I’ve searched and searched but I’ve only found solutions to .join() the items into a single string..this is my first question so I’ll try my best to explain thoroughly.

const createCard = () => {
    const pokemonTypes = ['grass', 'fire', 'water'];
      return (
        `<div>
          ${pokemonTypes.map(type => `<div>${type}</div>`)}
        </div>`
      )
}

document.body.insertAdjacentHTML("beforeend", createCard());

For some context, I am using an API but I simplified the code so it’s quick and easy to read.

I am trying to display each string into its own div so that I can style each div separately…like color coded buttons: green for grass, blue for water, red for fire etc.

When I run the code the strings successfully display in their own div, however the comma remains. I’d like them to just display next to each without the comma separating them.

Thank you!