问如何使用yup和useForm在react上使用选项卡创建表单验证？

EN

const schema = yup.object().shape({
  projectName: yup.string().required('Please enter project name here'),
  projectClient: yup
    .string()
    .required('Please choose your client for this project'),
});

const createProject = () => {
const [projectInfo, setProjectInfo] = useState({
    projectName: '',
    projectClientName: '',
  });

const { register, errors, handleSubmit } = useForm({
    resolver: yupResolver(schema),
    mode: 'all',
  });
}

const handleOnSubmit = () => {
    dispatch(registerProject(projectInfo));
 };

return (

<form
              className='form-container w-full flex flex-col relative'
              onSubmit={handleSubmit(handleOnSubmit)}
            >
              
              <div
                className={`w-full ${
                  tabActive === 'Create' ? 'block' : 'hidden'
                }`}
              >
                <div className='relative rounded-tl-lg rounded-tr-lg'>
                  <h4 className='text-grey text-lg font-bold text-center tracking-wider'>
                    Create Project
                  </h4>
                  <XIcon
                    className='w-5 h-5 absolute top-0 right-0 opacity-40 cursor-pointer'
                    aria-hidden='true'
                    onClick={() => showProjectCreate(false)}
                  />
                </div>
                <div className='pt-10'>
                  <label className='text-sm font-medium' htmlFor='password'>
                    Project name
                  </label>
                  <div className='mt-2 relative'>
                    <InputElement
                      className={`w-full px-4 py-5 text-sm leading-tight rounded-md appearance-none ${
                        errors.projectName
                          ? 'border-danger focus:border-danger'
                          : 'border focus:border-primary'
                      } border focus:border-primary focus:outline-none focus:shadow-outline`}
                      id='projectName'
                      name='projectName'
                      type='text'
                      placeholder='Enter your project name here'
                      ref={register}
                      value={projectInfo.projectName}
                      onChange={handleOnChange}
                    />
                    <p className='text-xxs text-danger mt-2 absolute'>
                      {errors.projectName?.message}
                    </p>
                  </div>
                </div>
<div className='pt-10'>
                  <label className='text-sm font-medium' htmlFor='projectClientName'>
                    Project client name
                  </label>
                  <div className='mt-2 relative'>
                    <InputElement
                      className={`w-full px-4 py-5 text-sm leading-tight rounded-md appearance-none ${
                        errors.projectName
                          ? 'border-danger focus:border-danger'
                          : 'border focus:border-primary'
                      } border focus:border-primary focus:outline-none focus:shadow-outline`}
                      id='projectClientName'
                      name='projectClientName'
                      type='text'
                      placeholder='Enter your project name here'
                      ref={register}
                      value={projectInfo.projectClientName}
                      onChange={handleOnChange}
                    />
                    <p className='text-xxs text-danger mt-2 absolute'>
                      {errors.projectName?.message}
                    </p>
                  </div>
                </div>
</div>
</form>

)
}