Use a component inside a template literal

Question

Inside of my render function I have another function that is used as a defaultProp. This function maps over an array and returns multiple divs that are basically ways to write HTML for a CMS.

Here is what that function returns:

  const renderElements = elementsArray
    .map(
      item => `<div class="explanation"><h1>${item.title}</h1>
      <h2>${item.code}</h2>
      </div>
      <CopyToClipboard text=${item.code}>
          <button>Copy</button>
      </CopyToClipboard>
      <div class="example">
      ${item.example}
      </div>
      `,
    )
    .join('');
  return `${renderElements}`;
};

However, I have the CopyToClipboard package that is imported. I've tried surrounding the component with ${}, but I can't get the CopyToClipboard to be used within this template.