bootstrap css的Formik验证显示问题

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

import { useFormik } from 'formik';

// 表单验证逻辑
const validate = (values) => {
  const errors = {};

  // 在这里添加你的表单验证规则

  return errors;
};

// 表单组件
const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      // 在这里添加你的表单字段
    },
    validate,
    onSubmit: (values) => {
      // 在这里处理表单提交
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div className="mb-3">
        <label htmlFor="email" className="form-label">Email</label>
        <input
          type="email"
          className={`form-control ${formik.errors.email ? 'is-invalid' : ''}`}
          id="email"
          name="email"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.email}
        />
        {formik.errors.email && (
          <div className="invalid-feedback">
            {formik.errors.email}
          </div>
        )}
      </div>
      
      {/* 在这里添加其他表单控件 */}
      
      <button type="submit" className="btn btn-primary">提交</button>
    </form>
  );
};