How to use the @material/textfield.MDCTextField function in @material/textfield

this.document = null
    this.autosaveID = null
    this._isEditingSource = false

    this.autosaveEl.addEventListener('click', this.handleAutosaveClick.bind(this))
    this.saveEl.addEventListener('click', () => { this.save(true) })
    this.podPathEl.addEventListener('change', () => { this.load(this.podPath) })
    this.podPathEl.addEventListener('keyup', () => { this.delayPodPath() })

    this.mobileToggleMd = MDCIconToggle.attachTo(this.mobileToggleEl)
    this.mobileToggleEl.addEventListener(
      'MDCIconToggle:change', this.handleMobileClick.bind(this))
    this.sourceToggleMd = MDCIconToggle.attachTo(this.sourceToggleEl)
    this.sourceToggleEl.addEventListener(
      'MDCIconToggle:change', this.handleSourceClick.bind(this))
    this.podPathMd = new MDCTextField(
      this.containerEl.querySelector('.content__path .mdc-text-field'))
    this.saveProgressMd = MDCLinearProgress.attachTo(
      this.containerEl.querySelector('.sidebar__save .mdc-linear-progress'))
    this.saveProgressMd.close()

    this.api = new EditorApi({
      host: this.host,
      port: this.port,
    })
    this.partials = new Partials(this.api)

    // Default to loading with the UI.
    this.load(this.podPath)

    // TODO Start the autosave depending on local storage.
    // this.startAutosave()

const elementBreadcrumb = document.getElementById('breadcrumb');
const elementReviewForm = document.getElementById('review-form');
const elementRestaurantIdInput = document.getElementById('restaurant-id-input');
const elementRestaurantIdLabel = document.getElementById('restaurant-id-label');
// const elementNameInput = document.getElementById('name-input');
// const elementRestaurantRatingSelect = 
//   document.getElementById('restaurant-rating-select');
// const elementCommentsInput = document.getElementById('comments-input');

/**
 * Material Design
 */
const classRestaurantIdInput = 
  new MDCTextField(document.querySelector('.restaurant-id-input'));
const classNameInput = 
  new MDCTextField(document.querySelector('.name-input'));
const classRestaurantRatingSelect = 
  new MDCSelect(document.querySelector('.restaurant-rating-select'));
const classCommentsInput = 
  new MDCTextField(document.querySelector('.comments-input'));

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

/**
 * Start the following when the initial HTML document has been
 * completely loaded and parsed, without waiting for stylesheets, images,
 * and subframes to finish loading.
 * Fetch neighborhoods and cuisines.
 * https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
 */
document.addEventListener('DOMContentLoaded', (event) => {

onBeforeFlow() {
        const textField = this.querySelector('.mdc-text-field');
            console.log('i222n',this.mwcInstance)
        if (textField) {

            this.mwcInstance = new MDCTextField(textField);
            console.log('in',this.mwcInstance)
        }
    }
}

export function initDateTime() {
    console.log('\tDateTime');
    let components = document.querySelectorAll('.v-datetime');
    for (let i = 0; i < components.length; i++) {
        let component = components[i];
        if (!component.vComponent) {
            component.vComponent = new VDateTime(component, new MDCTextField(component));
        }
    }
}

() => {
        if (this.control) {
          this.MDComponent = new MDCTextField(this.control);
          if (this.props.onInit) {
            this.props.onInit(this.MDComponent);
          }
          if (this.props.value) {
            this.MDComponent.value = this.props.value;
          }
        }
        this.afterComponentDidMount();
      }
    );

recreate_() {
    if (this.mdc) {
      this.mdc.destroy();
    }

    this.mdc = new MDCTextField(this.root_);
  }

error(event) {
    let response = event.detail[0];
    let usernameField = new MDCTextField(this.usernameFieldTarget);
    usernameField.valid = false;
    usernameField.helperTextContent = response["errors"][0];
  }
}

const btnsDiv = document.querySelector(".btns");
  const modelLoadingNotice = document.querySelector("#model-loading");
  const progressBar = document.querySelector("#progressBar");
  const rippleSurface = document.querySelectorAll(".ripple-surface");

  for (let i = 0; i < 9; i++) {
    predictedWordsButtons.push(document.querySelector(`#word${i + 1}`));
  }

  modelLoadingNotice.style.display = "block";
  btnsDiv.style.display = "none";
  inputTextField.style.display = "none";

  rippleSurface.forEach(i => MDCRipple.attachTo(i));

  let mdcTextField = new MDCTextField(inputTextField);
  MDCTopAppBar.attachTo(document.querySelector("#app-bar"));
  let drawer = new MDCTemporaryDrawer(document.querySelector("#drawer"));

  document.querySelector("#menu").addEventListener("click", () => {
    drawer.open = true;
  });

  const model = await loadModel("/web_model/model.json");

  /**
   * Predict next word
   * @param {string} string Input String.
   * @param {number} numPrediction Total number of prediction to get.
   */
  window.predictNextWord = async (string, numPrediction) => {
    isQuestion = false;

import {MDCRipple} from '@material/ripple';
import {MDCTextField} from '@material/textfield';
import {MDCSelect} from '@material/select';

const classRestaurantIdInput = 
  new MDCTextField(document.querySelector('.restaurant-id-input'));
const classNameInput = new MDCTextField(document.querySelector('.name-input'));
const classRestaurantRatingSelect = 
  new MDCSelect(document.querySelector('.restaurant-rating-select'));
const classCommentsInput = 
  new MDCTextField(document.querySelector('.comments-input'));

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

import {MDCRipple} from '@material/ripple';
import {MDCTextField} from '@material/textfield';
import {MDCSelect} from '@material/select';

const classRestaurantIdInput = 
  new MDCTextField(document.querySelector('.restaurant-id-input'));
const classNameInput = new MDCTextField(document.querySelector('.name-input'));
const classRestaurantRatingSelect = 
  new MDCSelect(document.querySelector('.restaurant-rating-select'));
const classCommentsInput = 
  new MDCTextField(document.querySelector('.comments-input'));

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));