How to use the @rmwc/base.matches function in @rmwc/base

handleClick(evt: React.MouseEvent) {
    this.props.onClick && this.props.onClick(evt);

    const index = this.getListItemIndex(evt);

    // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
    const toggleCheckbox = !matches(
      evt.target as HTMLElement,
      MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR
    );

    this.foundation.handleClick(index, toggleCheckbox);
  }

(evt: React.MouseEvent) => {
      props.onClick?.(evt);

      const index = getListItemIndex(evt);

      // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
      const toggleCheckbox = !matches(
        evt.target as HTMLElement,
        MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR
      );

      foundation.handleClick(index, toggleCheckbox);
    },
    [getListItemIndex, foundation, props.onClick]

isSurfaceActive: () => {
          if (rootEl.ref) {
            return matches(rootEl.ref, ':active');
          }
          return false;
        },
        isSurfaceDisabled: () => !!getProps().disabled,

eventTargetMatchesSelector: (evtTarget: EventTarget, selector: string) =>
        matches(evtTarget as HTMLElement, selector),
      addClass: (className: string) => this.root.addClass(className),

eventTargetMatches: (target: HTMLElement, selector: string) =>
        matches(target, selector),
      trapFocus: () => {

eventTargetMatches: (target: HTMLElement, selector: string) =>
        matches(target, selector),
      trapFocus: () => {

isSurfaceActive: () => {
        if (this.root.ref) {
          return matches(this.root.ref, ':active');
        }
        return false;
      },
      isSurfaceDisabled: () => !!this.props.disabled,

eventTargetMatchesSelector: (
          evtTarget: EventTarget,
          selector: string
        ) => matches(evtTarget as HTMLElement, selector),
        addClass: (className: string) => rootEl.addClass(className),