如何使用react hook和yup验证一个对象中的两个字段

import React, { useState } from 'react';
import * as Yup from 'yup';

const MyComponent = () => {
  const [formData, setFormData] = useState({
    field1: '',
    field2: ''
  });

  // 其他组件代码...

  return (
    // 表单代码...
  );
}

export default MyComponent;

const validationSchema = Yup.object().shape({
  field1: Yup.string().required('Field 1 is required'),
  field2: Yup.string().test('custom-validation', 'Field 2 is invalid', (value, context) => {
    // 自定义验证规则
    // 返回true表示验证通过，返回false或者字符串表示验证失败
    // value是字段的值，context包含其他字段的值
    // 例如，可以在这里验证field2是否与field1匹配
    return value === context.parent.field1;
  })
});

const MyComponent = () => {
  const [formData, setFormData] = useState({
    field1: '',
    field2: ''
  });

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      await validationSchema.validate(formData, { abortEarly: false });
      // 验证通过，执行其他逻辑
    } catch (errors) {
      // 验证失败，处理错误信息
      console.log(errors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formData.field1}
        onChange={(event) => setFormData({ ...formData, field1: event.target.value })}
      />
      <input
        type="text"
        value={formData.field2}
        onChange={(event) => setFormData({ ...formData, field2: event.target.value })}
      />
      <button type="submit">Submit</button>
    </form>
  );
}