react-hook-form:如何显示嵌套名称的错误？

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, errors } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        First Name:
        <input name="user.firstName" ref={register} />
      </label>
      {errors.user?.firstName && (
        <p>{errors.user.firstName.message}</p>
      )}

      <label>
        Last Name:
        <input name="user.lastName" ref={register} />
      </label>
      {errors.user?.lastName && (
        <p>{errors.user.lastName.message}</p>
      )}

      <input type="submit" />
    </form>
  );
}

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, setError, errors } = useForm();

  const onSubmit = (data) => {
    if (data.user.firstName !== 'John') {
      setError('user.firstName', {
        type: 'manual',
        message: 'First name should be John',
      });
    }

    // 处理表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 表单字段和错误处理同上 */}
    </form>
  );
}