Отображение ошибки в текстовом поле с использованием пользовательского интерфейса материала

Question

Я создаю приложение, используя reactJS, и у меня есть кнопка с именем add item, элемент должен быть напечатан в текстовом поле. Я пытаюсь выяснить способ отображения сообщения об ошибке в текстовом поле, которое я создал с помощью пользовательского интерфейса материала при нажатии кнопки. При нажатии кнопки метод должен проверить, является ли текстовое поле пустым. Если текстовое поле пустое, в текстовом поле должна быть ошибка, указывающая на то, что текстовое поле пустое.

Я не смог найти способ сделать это при нажатии кнопки.

Это мое приложение. js, и в методе addItem я проверяю, не является ли текстовое поле не ложным, мне нужно выполнить сообщение об ошибке

handleInput = e => {
  this.setState({
    newItem: {
      id: 1 + Math.random(),
      itemText: e.target.value
    }
  });

};

addItem = e => {
  e.preventDefault();
  const typedItem = this.state.newItem;
  if (typedItem.itemText !== "") {
    const typedItems = [...this.state.items, typedItem];
    this.setState({
      items: typedItems,
      newItem: {
        id: '',
        itemText: ''
      },
      updateItem: false
    })
  } else {

  }

};

render() {
  return (
    <div >

      <HeaderBar />
      <InputForm newItem={this.state.newItem.itemText}
        addItem={this.addItem}
        handleInput={this.handleInput}
      />
    </div>
  );
}

Это часть мой компонент формы, где я раздал реквизиты, поэтому, когда я отправляю кнопку, мне нужно отобразить ошибку в текстовом поле. Как мне это сделать? Нужно ли выполнять из формы компонента или приложения. js

const { newItem, addItem, handleInput } = this.props;

<form onSubmit={addItem} autoComplete='off' >
  <TextField
    id="outlined-full-width"
    label="Input"
    style={{ width: '90%', marginTop: 30, marginLeft: 40 }}
    placeholder="Add A Todo Item "
    margin="normal"
    InputLabelProps={{
      shrink: true,
    }}
    size="medium"
    variant="outlined"
    value={newItem}
    onChange={handleInput}
  //error{newItem === ""}
  />
  {buttonChange()}
</form>