我的表单没有正确显示错误消息

import React, { useState } from 'react';

function Form() {
  const [errors, setErrors] = useState({});

  const handleSubmit = (event) => {
    event.preventDefault();
    // 模拟验证失败
    setErrors({ username: '用户名不能为空' });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名</label>
        <input type="text" name="username" />
        {errors.username && <p style={{ color: 'red' }}>{errors.username}</p>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

export default Form;

const express = require('express');
const app = express();

app.use(express.json());

app.post('/submit', (req, res) => {
  const { username } = req.body;
  if (!username) {
    return res.status(400).json({ errors: { username: '用户名不能为空' } });
  }
  res.status(200).json({ message: '提交成功' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

import axios from 'axios';

const handleSubmit = async (event) => {
  event.preventDefault();
  try {
    const response = await axios.post('/submit', { username: '' });
    console.log(response.data.message);
  } catch (error) {
    if (error.response && error.response.status === 400) {
      setErrors(error.response.data.errors);
    }
  }
};