How do I clear selected MDC Chips in a Stencil Component?

Question

I'm trying to use MDC Web Chips in a Stencil component. A user can select and deselect as many chips as they require, we capture the ID of selected chips, and the number of chips selected, and emit these to be picked up by a parent component which is used to filter content.

I also want to add a button that when clicked runs through the chips, checks which have the value of isSelected true and changes that to false to clear the selection.

A Chip is set up as a Stencil component which is used inside a Chip Set component, the parent of the Chip.

This is the Chip Set component:

import { Component, Host, h, Event, EventEmitter, Element, Prop } from '@stencil/core';

import { MDCChipSet } from '@material/chips';

@Component({
  tag: 'chipset',
  styleUrl: 'chipset.scss',
  shadow: true,
})
export class Chipset {

  @Event() selectedChipIDsChange: EventEmitter<string[]>;
  @Event() chipCountChange: EventEmitter<number>;

  @Element() el: HTMLElement;

  selectedChipIDs: string[] = []; // Define selectedChipIDs here

  componentDidLoad() {
    const chipSet = new MDCChipSet(this.el.shadowRoot.querySelector('.mdc-evolution-chip-set'));
    console.log('ChipSet initialised:', chipSet);

    chipSet.listen('MDCChip:interaction', (event: CustomEvent) => {
      const chipID = event.detail.chipID;
      console.log("Selected detail", event.detail)
      console.log("Selected ID", event.detail.chipID)

      // Toggle chip selection status
      const index = this.selectedChipIDs.indexOf(chipID);
      if (index === -1) {
        this.selectedChipIDs.push(chipID);
      } else {
        this.selectedChipIDs.splice(index, 1);
      }

      this.updateSelectedChipIDs(); // Call the method to emit the updated array

      // Emit the chip count as a number
      this.chipCountChange.emit(this.selectedChipIDs.length);

    });
  }

  updateSelectedChipIDs() {
    // Emit the updated array to the parent component
    this.selectedChipIDsChange.emit(this.selectedChipIDs);
  }

  render() {
    return (
      <Host>
        <span class="mdc-evolution-chip-set" role="listbox" aria-orientation="vertical" aria-multiselectable="true">
          <span class="mdc-evolution-chip-set__chips" role="presentation">
            
            <wcui-mdc-chip label="Chip One"></wcui-mdc-chip>
            <wcui-mdc-chip label="Chip Two"></wcui-mdc-chip>
            <wcui-mdc-chip label="Chip Three"></wcui-mdc-chip>

            <button id="clear">Clear</button>

          </span>
        </span>
      </Host>
    );
  }
}

The issue I'm having is not being familiar with the MDCChipSet API (detailed here https://github.com/material-components/material-components-web/blob/v12.0.0/packages/mdc-chips/chip-set/README.md#api) I don't know how to access those Chip properties to change isSelected from true to false.

As part of the MDCChipSet methods in the above link there are method signatures to getSelectedChipIndexes() and setChipSelected(). I assume it would be a case of running through the chips, indexing selected chips and then setting the boolean value on setChipSelected to false. However, I'm fairly new to working with components and I'm completely stuck as to how I would go about that.

I must be missing something pretty simple here, right? A lack of examples is killing me on this one.