Formik + Yup对嵌套值的访问错误

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

const validationSchema = Yup.object().shape({
  address: Yup.object().shape({
    street: Yup.string().required("Street is required"),
    city: Yup.string().required("City is required"),
    // 其他嵌套属性的验证规则
  }),
});

const initialValues = {
  address: {
    street: "",
    city: "",
    // 其他嵌套属性的初始值
  },
};

const App = () => {
  const handleSubmit = (values) => {
    // 处理表单提交逻辑
  };

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      <form>
        <div>
          <label htmlFor="street">Street</label>
          <Field type="text" id="street" name="address.street" />
          <ErrorMessage name="address.street" component="div" />
        </div>
        <div>
          <label htmlFor="city">City</label>
          <Field type="text" id="city" name="address.city" />
          <ErrorMessage name="address.city" component="div" />
        </div>
        {/* 其他嵌套属性的表单字段和错误消息 */}
        <button type="submit">Submit</button>
      </form>
    </Formik>
  );
};

export default App;