如何在TextField上动态设置按钮onClick方法中的ErrorMessage

import React, { useState } from 'react';

const TextField = () => {
  const [errorMessage, setErrorMessage] = useState('');

  const handleClick = (event) => {
    event.preventDefault();

    const inputValue = event.target.parentNode.querySelector('input').value;

    // 进行输入值的逻辑判断
    if (inputValue === '') {
      setErrorMessage('请输入内容');
    } else if (inputValue.length < 5) {
      setErrorMessage('内容长度不能少于5个字符');
    } else {
      // 输入值符合要求，执行相应的操作
      // ...
    }
  };

  return (
    <div>
      <input type="text" />
      <button onClick={handleClick}>Submit</button>
      {errorMessage && <p>{errorMessage}</p>}
    </div>
  );
};

export default TextField;