Reactstrap输入验证错误。需要帮助

import React, { useState } from 'react';
import { Form, FormGroup, Label, Input, FormFeedback } from 'reactstrap';

function MyForm() {
  const [inputValue, setInputValue] = useState('');
  const [isValid, setIsValid] = useState(false);

  const handleChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    setIsValid(value.length > 3); // 示例验证规则
  };

  return (
    <Form>
      <FormGroup>
        <Label for="exampleEmail">Email</Label>
        <Input
          type="email"
          name="email"
          id="exampleEmail"
          value={inputValue}
          onChange={handleChange}
          valid={isValid}
          invalid={!isValid}
        />
        <FormFeedback>输入无效</FormFeedback>
      </FormGroup>
    </Form>
  );
}

export default MyForm;

import 'bootstrap/dist/css/bootstrap.min.css';

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  email: Yup.string().email('Invalid email format').required('Required'),
});

function MyForm() {
  return (
    <Formik
      initialValues={{ email: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="email" type="email" />
          <ErrorMessage name="email" component="div" className="error" />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

export default MyForm;