react-hook-form yup resolver, reactStrap problem resolving error from child component

Question

I have a form with helper components that contain my Input component.

• correctly returns validation error if the Input is DIRECTLY in the form
• fails to return validation error Input is inside a Child Component.

react-hook-form ^6.9.2

yup ^0.32.8

yupResolver @hookform/resolvers ^0.1.1

"reactstrap": "^8.7.1",

// only receive validation message for subject.
// but submission returns ALL the fields and values correctly..

 const schema = yup.object().shape({
    subject: yup.string().required('Please provide a subject'),
    AccountTitleLine1: yup.string("Account Title is Required"),
  });
<Form onSubmit={handleSubmit(onSubmit)}>

//this works
    <Input
        type="subject"
        name="subject"
        id="subject"
        defaultValue={'item.subject'}
        innerRef={register()}
    />

//but this doesn't: 
  <Field 
    name="AccountTitleLine1" 
    label='Account Title Line1' 
    text={item.AccountTitleLine1}   
    register={register} 
    readOnly={readOnly} 
    labelLeft 
  />
</Form>


//Field Component:
export const FieldOldNew = (props) => {
    const name = props.name; // props.name.match(/[^\.]+$)/);
    const type = props.type || 'input';
    const text = props.text;
    const register = props.register;

...

return (
    <Input
        name={name}
        type={type}
        defaultValue={text}
        innerRef={register()}
    />
)

Answer 1

You're missing the required method call on AccountTitleLine1 like you do on subject in your yup schema.

const schema = yup.object().shape({
  subject: yup.string().required('Please provide a subject'),
  AccountTitleLine1: yup.string().required("Account Title is Required"),
});