material design dynamic chips with jquery - chipSetEl.appendChild is not a function

Question

I'm trying to add tags when a user selects an option from a dropdown. So they can pick multiple items and there would then be tags underneath demonstrating the choices.

My current attempt, trying to take from: https://material.io/develop/web/components/chips/

 <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">   
<div class="mdc-chip-set mdc-chip-set--input" role="grid"></div>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script type="text/javascript">
  const chipSetEl = mdc.chips.MDCChipSet.attachTo(document.querySelector('.mdc-chip-set'));
  //const chipSet = new mdc.chips.MDCChipSet(chipSetEl);

  $(function() {
    $(document).on("change", '#search_selectWrap', function() {
      const chipEl = document.createElement('div');
      // ... perform operations to properly populate/decorate chip element ...
      chipSetEl.appendChild(chipEl);
      //chipSet.addChip(chipEl);
    });
  });
</script>

My error is currently:

chipSetEl.appendChild is not a function

However if I add uncomment the chipSet initialisation, I also get the error:

this.root_.querySelectorAll is not a function

chipset el console.log:

EDIT

New definition of chipSetEl and attempt of customisation:

const chipSetEl = document.querySelector('.mdc-chip-set');
const chipSet = new mdc.chips.MDCChipSet(chipSetEl);
console.log(chipSetEl);

$(function()
{
    $(document).on("change", '#search_selectWrap',function ()  {
        const chipEl = document.createElement('div');
        chipEl.shouldRemoveOnTrailingIconClick = true;
        chipEl.innerHTML = "hi";
        chipEl.style["background-color"] = "green"; 
        // ... perform operations to properly populate/decorate chip element ...
        chipSetEl.appendChild(chipEl);
        chipSet.addChip(chipEl);
    });
});