Как передать контроллер компонентом в другой компонент??

Question

San Manjiro @sanManjiro

React

Как передать контроллер компонентом в другой компонент??

У меня есть компонент с контроллером, который мне нужно отрендерить в другом компоненте, проблема заключается в том, что компонент с контроллером на сайте есть, и есть даже поле для ввода, но вот useForm не видит этот контроллер.
Компонент с контроллером:

import React, { useEffect, useState } from 'react'
import { useForm, Controller } from 'react-hook-form'

import { WarrningError } from './helper/component/warrning-error';
import NumberFormat from 'react-number-format'


export const TestNumber = ( props ) => {
  const {
    control,
    formState: { errors }
  } = useForm({
    mode: "all"
  })


  useEffect(() => {
    setPhoneNumber(props.value)
  }, [props.value])


  const [phoneNumber, setPhoneNumber] = useState()


  return (
    <>
      <Controller
        control={control}
        name={props.name}
        rules={{
          required: true,
          minLength: {
            value: 11,
            message: "*Заполните полностью поле телефона",
          },
        }}
        render={({ field: { onChange, onBlur } }) => (
          <>
            <NumberFormat
              type="tel"
              format="+7 (###) ###-####"
              allowEmptyFormatting
              mask="_"
              onBlur={onBlur}
              value={phoneNumber}
              onValueChange={(values) => {
                const { formattedValue, value } = values;
                // formattedValue = $2,223
                // value ie, 2223
                setPhoneNumber(formattedValue.toString());
              }}
              onChange={(event) =>
                onChange(event.target.value.replace(/[^0-9]/g, ""))
              }
            />
            <WarrningError>
              {errors?.phoneNumber && (
                <p>
                  {errors?.phoneNumber?.message ||
                    `*Необходимо заполнить поле "Номер телефона"`}
                </p>
              )}
            </WarrningError>
          </>
        )}
      />
    </>
  );
}

То, как я его вызываю в другом компоненте:

import { TestNumber } from '../test-number'
...
<TestNumber name = "phoneNumber" value = { setPhoneNumber } />

То, как выглядит это на сайте, стрелочкой указан нужный компонент:

Проблема в том, что когда я отправляю форму, она приходит вида:

{lastName: 'Фывфыв', firstName: 'Фывфыв', middleName: '', email: 'asdf@gmail.com'}
email: "asdf@gmail.com"
firstName: "Фывфыв"
lastName: "Фывфыв"
middleName: ""
[[Prototype]]: Object

То есть поля с номером телефона нет. Не знаю что делать, совсем недавно начал пользовать контроллерами, может то, что я пытаюсь сделать, сделать и не возможно. Заранее спасибо.