How to use the @material/menu-surface/foundation.MDCMenuSurfaceFoundation function in @material/menu-surface

componentDidMount() {
    const {
      anchorCorner,
      anchorMargin,
      coordinates,
      fixed,
      quickOpen,
    } = this.props;
    this.handleWindowClick = (evt: MouseEvent) => this.foundation.handleBodyClick(evt);
    this.registerWindowClickListener = () =>
      window.addEventListener('click', this.handleWindowClick!);
    this.deregisterWindowClickListener = () =>
      window.removeEventListener('click', this.handleWindowClick!);
    this.foundation = new MDCMenuSurfaceFoundation(this.adapter);
    this.foundation.init();
    // this deviates from the mdc web version.
    // here we force the menu to hoist, and require either
    // this.props.(x,y) or this.props.anchorElement.
    this.foundation.setIsHoisted(true);
    this.foundation.setFixedPosition(fixed!);
    if (coordinates) {
      this.setCoordinates();
    }
    if (anchorCorner) {
      this.foundation.setAnchorCorner(anchorCorner);
    }
    if (anchorMargin) {
      this.foundation.setAnchorMargin(anchorMargin);
    }
    if (quickOpen) {

mounted() {
    this._previousFocus = undefined;

    this.foundation = new MDCMenuSurfaceFoundation(
      Object.assign(
        {
          addClass: className => this.$set(this.classes, className, true),
          removeClass: className => this.$delete(this.classes, className),
          hasClass: className => this.$el.classList.contains(className),
          hasAnchor: () => !!this.anchorElement,
          notifyClose: () => {
            emitCustomEvent(this.$el, strings.CLOSED_EVENT, {});

            this.$emit('change', false);
          },
          notifyOpen: () => {
            emitCustomEvent(this.$el, strings.OPENED_EVENT, {});

            this.$emit('change', true);
          },