Как управлять проверкой множественных текстовых полей в пользовательском интерфейсе?

Question

Я создаю форму в Materia-UI и React. js, и я проверяю два TextField. Я хочу проверить оба TextFields с одинаковыми error и textHelper реквизитами. Ниже я покажу фрагмент кода моей работы. Если у кого-то есть идея, пожалуйста, поделитесь со мной, это будет полезно.

const AddPost = ({error, helperText, handleInputChange, handleSubmit}) => {
  <div>
    <form onSubmit={handleSubmit}>
    <TextField value={titleValue} onChange={handleInputChange} helperText={helperText} error={error} name={"title"} />
    <TextField value={bodyValue} onChange={handleInputChange} helperText={helperText} error={error} name={"body"} />
    </form>
  </div>
}


class Post extends React.Component {
    constructor(props) {
      super(props);
        this.state = {
          body: '',
          title: '',
          helperText: "",
          error: false,
    }
  }

  handleInputChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    })
    if (event.target.value < 1) {
      this.setState({
        error: true,
        helperText: "This field is required!",
      })
   } else {
      this.setState({
        error: false,
        helperText: "",
      })
    }
  }

  render(){
    return(
       <AddPost
          titleValue={this.state.title}
          bodyValue={this.state.body}
          handleInputChange={this.handleInputChange}
          handleSubmit={this.handleSubmit}
          helperText={this.state.helperText}
          error={this.state.error}
       />
    )
  }
}

Вспомогательный текст отображается в обоих текстовых полях, даже если я пишу только первым. Пожалуйста, помогите мне решить эту проблему, вы спасете мой день.