использование формы хука реакции в родном приложении реакции

Я пытаюсь создать повторно используемый компонент контроллера, который получает реквизит 'name' вместо того, чтобы снова и снова копировать одни и те же теги контроллера с разными реквизитами 'name'.

Вместо того, чтобы писать это:

MyScreen.tsx

       <Controller
          name="name"
          control={control}
          rules={{
            required: {value: true, message: 'Name is required'},
          }}
          defaultValue=""
          render={({onChange, value}: any) => (
            <Input
              error={errors.name}
              errorText={errors?.name?.message}
              onChangeText={(text: any) => onChange(text)}
              value={value}
              placeholder="Name"
            />
          )}
        />
       <Controller
          name="email"
          control={control}
          rules={{
            required: {value: true, message: 'Email is required'},
          }}
          defaultValue=""
          render={({onChange, value}: any) => (
            <Input
              error={errors.name}
              errorText={errors?.name?.message}
              onChangeText={(text: any) => onChange(text)}
              value={value}
              placeholder="Email"
            />
          )}
        />

Я хотел бы иметь что-то вроде этого:

MyScreen.tsx

<MyControllerComponet name ="name"/>
<MyControllerComponet name ="email"/>

И экспортируйте MyControllerComponet следующим образом:

const MyControllerComponet= (props)=>{
const {handleSubmit, control, errors} = useForm();
 return (
    <View>
      <Controller
        name={props.name}
        control={control}
        rules={{
          required: {value: true, message: 'Email is required'},
          pattern: {
            value: EMAIL_REGEX,
            message: 'Not a valid email',
          },
        }}
        defaultValue=""
        render={({onChange, value}: any) => (
          <TextInput
            style={[styles.inputContainer, props.error, props.style]}
            {...props}
          />
        )}
      />
    </View>
  );
};

Этот пример не работает - ввод/данные не передаются от компонента контроллера к экрану MyScreen (от дочернего к родительскому). любые идеи, как я могу заставить его работать?

дополнительные скриншоты:

Главный экран

MyControllerComponet

окончательный результат

как вы можете видеть, только 1,2 значения (первый и второй контроллеры на главном экране) регистрируются в консоли при нажатии кнопки «Отправить», а 3-е значение — нет.

Спасибо за помощь