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

handleClick(evt: React.MouseEvent) {
    this.props.onClick && this.props.onClick(evt);
    // fixes an issue with nested span element on list items
    const el = closest(evt.target, '.mdc-list-item');
    el && this.foundation.handleItemAction(el);
  }

componentDidMount() {
    if (this.root.ref) {
      const anchor = closest(
        this.root.ref,
        `.${MDCMenuSurfaceFoundation.cssClasses.ANCHOR}`
      );
      anchor && (this.anchorElement = anchor);
    }
    // this has to be run AFTER we try to get our anchor
    super.componentDidMount();
  }

(evt: React.MouseEvent) => {
      props.onClick?.(evt);
      // fixes an issue with nested span element on list items
      const el = closest(evt.target, '.mdc-list-item');
      el && foundation.handleItemAction(el);
    },
    [foundation, props.onClick]

const handleSurfaceClick = (evt: React.MouseEvent | MouseEvent) => {
    if (evt.target instanceof Element) {
      let el = evt.target;

      const button = closest(el, '.mdc-button') as Element;
      if (button) {
        el = button;
      }

      if (
        props.dismissesOnAction &&
        el.classList.contains('mdc-snackbar__action')
      ) {
        foundation.handleActionButtonClick(
          evt as MouseEvent,
          // @ts-ignore
          el.dataset.mdcSnackbarAction
        );
      } else if (el.classList.contains('mdc-snackbar__dismiss')) {
        foundation.handleActionIconClick(evt as MouseEvent);
      }

handleSurfaceClick(evt: React.MouseEvent | MouseEvent) {
    if (evt.target instanceof Element) {
      let el = evt.target;
      const button = closest(el, '.mdc-button') as Element;
      if (button) {
        el = button;
      }

      if (
        this.props.dismissesOnAction &&
        el.classList.contains('mdc-snackbar__action')
      ) {
        this.foundation.handleActionButtonClick(
          evt as MouseEvent,
          // @ts-ignore
          el.dataset.mdcSnackbarAction
        );
      } else if (el.classList.contains('mdc-snackbar__dismiss')) {
        this.foundation.handleActionIconClick(evt as MouseEvent);
      }

getActionFromEvent: (evt: React.SyntheticEvent & Event) => {
        const element = closest(
          evt.target,
          `[${MDCDialogFoundation.strings.ACTION_ATTRIBUTE}]`
        );
        return (
          element &&
          element.getAttribute(MDCDialogFoundation.strings.ACTION_ATTRIBUTE)
        );
      },
      clickDefaultButton: () => {

useEffect(() => {
    const el = rootEl.ref;

    if (el) {
      const anchor = closest(
        el,
        `.${MDCMenuSurfaceFoundation.cssClasses.ANCHOR}`
      );
      anchor && (anchorElementRef.current = anchor);
    }
  }, [rootEl.ref]);

getActionFromEvent: (evt: React.SyntheticEvent & Event) => {
        const element = closest(
          evt.target,
          `[${MDCDialogFoundation.strings.ACTION_ATTRIBUTE}]`
        );
        return (
          element &&
          element.getAttribute(MDCDialogFoundation.strings.ACTION_ATTRIBUTE)
        );
      },
      clickDefaultButton: () => {