How to use the method formValueSelector of redux-form with a custom component to display an another component

Question

I try to create a form with redux-form that display an another input when I click on custom button.

I have found sample with simple component (input, checkbox) that works but when I want use the same logic with a custom component my selector is undefined.

   <Field
       name="addNumberPhone"
       id="addNumberPhone"
       component={ renderButtonAddNumberPhone }
       label='Add new label'
       type="checkbox"
   />
   { addNumberPhoneValue &&
       <div>
          display something
       </div>
   }

My render for my custom component:

const renderButtonAddNumberPhone = ({ input , label , name , meta: { touched , error } }) => (
   <button id='button-add-number-phone' className='button-add-number-phone' onClick={ (e) => {
      e.preventDefault();
   } }>
      <p><Icon name="plus" size={ 10 } fill="blue"/> { label }
      </p>
   </button>
)

and my configuration of the method formValueSelector:

const selector = formValueSelector('initializeFromState');
SampleForm = connect(state => {
    const addNumberPhoneValue = selector(state , 'addNumberPhone');    
    return {
        addNumberPhoneValue ,
    }
})(SampleForm);

Answer 1

Finaly, after read with more atention the documentation of redux-form I have solved my problem using FieldArrays tag and formValueSelector()