I am trying to loop gifts but the issue is after each object insertAdjacentHTML is inserting a comma, How can I be able to remove the comma?

            document.querySelector(`.chat-content`)?.insertAdjacentHTML(
              'beforeend',
              `<div class="gifts flex items-center h-20 gap-2">
                    ${gifts.map((gift: any) => `
                        <div class="gift bg-skin-field text-primary-yellow">
                            <i class="fas fa-gift"></i>
                            <span class="text-gray-400">${gift.channelId}</span>
                            <span>$${gift.price}</span>
                        </div>
                        `,
          )}
                </div>`,