How to use the @material/tabs/dist/mdc.tabs.MDCTabBarFoundation function in @material/tabs

getDefaultFoundation() {
    this.tabSelectedHandler_ = ({ detail }) => {
      const { tab } = detail
      const indexOfTab = this.tabs.indexOf(tab)
      if (indexOfTab < 0) {
        throw new Error(
          "Invalid tab component given as activeTab: Tab not found within this component's tab list"
        )
      }
      this.foundation_.switchToTabAtIndex(indexOfTab, true)
    }

    // prettier-ignore
    return new MDCTabBarFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      bindOnMDCTabSelectedEvent: helper.registerHandler('tabProps', this,  MDCTabFoundation.strings.SELECTED_EVENT, this.tabSelectedHandler_),
      unbindOnMDCTabSelectedEvent: helper.deregisterHandler('tabProps', this, MDCTabFoundation.strings.SELECTED_EVENT),
      registerResizeHandler: (handler) => window.addEventListener('resize', handler),
      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
      getOffsetWidth: () => this.root_.offsetWidth,
      setStyleForIndicator: (propertyName, value) => this.indicator_.style.setProperty(propertyName, value),
      getOffsetWidthForIndicator: () => this.indicator_.offsetWidth,
      notifyChange: (evtData) => {
        this.props.onChange_({detail: evtData})
        this.props.onChange(evtData)
      },
      getNumberOfTabs: () => this.tabs.length,
      isTabActiveAtIndex: (index) => this.tabs[index].isActive,
      setTabActiveAtIndex: (index, isActive) => {