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

getDefaultFoundation() {
    return new MDCMenuSurfaceFoundation({
      addClass: (className: string) => {
        this.root.addClass(className);
      },
      removeClass: (className: string) => {
        this.root.removeClass(className);
      },
      hasClass: (className: string) =>
        className === 'mdc-menu-surface' ? true : this.root.hasClass(className),
      hasAnchor: () => !!this.anchorElement,
      notifyClose: () => {
        this.emit('onClose', {});
        this.deregisterBodyClickListener();
        // an annoying hack... this is the only
        // place to catch the normal close and bodyClick handler
        // and correct it if we still want to be open.
        if (this.props.open) {

componentDidMount() {
    const {anchorCorner, anchorMargin, coordinates, fixed, open, quickOpen} = this.props;
    this.handleWindowClick_ = (evt) => 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.hoistToBody();
    this.foundation_.setFixedPosition(fixed);
    if (coordinates) {
      this.setCoordinates();
    }
    if (anchorCorner) {
      this.foundation_.setAnchorCorner(anchorCorner);
    }
    if (anchorMargin) {
      this.foundation_.setAnchorMargin(anchorMargin);
    }
    if (quickOpen) {
      this.foundation_.setQuickOpen(quickOpen);
    }

rootEl.setStyle(
              'top',
              position.top !== undefined ? position.top : null
            );
            rootEl.setStyle(
              'bottom',
              position.bottom !== undefined ? position.bottom : null
            );
          },
          setMaxHeight: (height: string) => {
            rootEl.setStyle('maxHeight', height);
          }
        };
      };

      const foundation = new MDCMenuSurfaceFoundation({
        addClass: (className: string) => {
          rootEl.addClass(className);
        },
        removeClass: (className: string) => {
          rootEl.removeClass(className);
        },
        hasClass: (className: string) =>
          className === 'mdc-menu-surface' ? true : rootEl.hasClass(className),
        hasAnchor: () => !!anchorElementRef.current,
        notifyClose: () => {
          deregisterBodyClickListener();
          setOpen(false);
        },
        notifyOpen: () => {
          emit('onOpen', {});
          registerBodyClickListener();