Как в форме передать значения schema (проверка в yup) в дочерние компоненты?

Question

[Нина]

Есть форма (написанная на React и react-hook-form), где валидация полей происходит с помощью Yup. Я хочу сделать дочерние компоненты (типовые поля), чтобы их можно было использовать с разными данными. Но никак не могу понять, как мне в дочерние компоненты передать конкретное значение из объекта schema ? - Например, в одном дочернем компоненте это значение будет "name". в другом - "phone" ? То есть, что написать в аргументе register

<input
          type="text"
          className={ errors.name ? "form__input form__input--error" : "form__input" }
          name={ name}
          id={id}
          placeholder={placeholder}
          { ...register("name") }
        />

или в выводе ошибки:

{ errors.name && <p className="form--error">{ errors.name.message }</p> }

Пробовала переменную regArg, которая должна принимать значения из schema :

const schema = yup.object().shape( {
  name: yup
    .string()
    .required( "Пожалуйста, заполните это поле" )
    .matches( nameRegExp, "Допускаются только латинские или кирилические буквы" )
    .min( 2, "В этом поле должно быть не менее 2-х символов" )
    .max( 15, "В этом поле должно быть не более 15-х символов" ),

  message: yup
    .string()
    .required( "Пожалуйста, заполните это поле" )
    .min( 2, "В этом поле должно быть не менее 2-х символов" ),

  phone: yup
    .string()
    .required( "Пожалуйста, заполните это поле" )
    .matches( phoneRegExp, "Телефон должен соответствовать виду: [phone]" ),
} );

Если я напишу в дочернем компоненте конкретно, например name - то ошибки выводятся, но у всех полей сразу и oдна и та же ошибка (которая прописана для name ). Но у меня разные поля с разными проверками (name, phone, message и т.д.). Если я пишу переменную, например, regArg , и передаю ей значение от родителя - то ничего не работает.

Вот код родителя:

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import TextField from "./TextField/TextField";

const nameRegExp = /[a-zA-zа-яА-яёЁ]$/;
const phoneRegExp = /[+7][0-9]{10}$/;

const schema = yup.object().shape( {
  name: yup
    .string()
    .required( "Пожалуйста, заполните это поле" )
    .matches( nameRegExp, "Допускаются только латинские или кирилические буквы" )
    .min( 2, "В этом поле должно быть не менее 2-х символов" )
    .max( 15, "В этом поле должно быть не более 15-х символов" ),

 phone: yup
    .string()
    .required( "Пожалуйста, заполните это поле" )
    .matches( phoneRegExp, "Телефон должен соответствовать виду: [phone]" ),
} );

function Form() {
  const { register, handleSubmit, reset, setValue, formState: { errors } } = useForm( {
    resolver: yupResolver( schema ),
    mode: "onTouched",
  } );

 const onSubmit = (data) => {
    console.log( data );
}

 return (
    <>
      <form action="#" className="form" onSubmit={ handleSubmit( onSubmit, onError ) }>

 <TextField
            id="name"
            label="Имя"
            placeholder="Иван"
            name="name"
            errors={ errors }
            register={ register }
            regArg="name"
          />
          <TextField
            id="phone"
            label="Телефон"
            placeholder="[phone]"
            name="phone"
            errors={ errors }
            register={ register }
            regArg="phone"
          />
 <button type="submit" className="form__btn">Отправить</button>
      </form>

    </>
  );
}

export default Form;

Код дочернего компонента:

import "./TextField.scss";
import React from "react";

function TextField({label, name, id, register, errors, placeholder, regArg}) {
return (
   <>
      <p className="form__item">
        <label className="form__label" htmlFor={ id} >
          {label}
        </label>
        <input
          type="text"
          className={ errors.regArg ? "form__input form__input--error" : "form__input" }
          name={ name}
          id={id}
          placeholder={placeholder}
          { ...register(`${regArg}`) }
        />
      </p>
      { errors.regArg && <p className="form--error">{ errors.regArg.message }</p> }
   </>
  );
}

export default TextField;