ReactJS: неправильный рендеринг списка компонентов

У меня есть компонент («ComponentA»), который несколько раз отображается в map () внутри render () другого компонента («ComponentB»).

Кроме того, у меня есть кнопка «ДОБАВИТЬ» в ComponentB, которая при нажатии добавляет (через метод unshift ()) объект в массив «state.objects» своего ComponentB (используемый для сопоставления экземпляров ComponentA). Каждый добавленный объект имеет свойство prop1, которое я установил для входного текстового значения ComponentA.

Проблема в том, что я не получал ожидаемых значений в состоянии каждого экземпляра ComponentA: во всех случаях элемент всегда имеет значение «1» (я ожидаю ... 3, 2, 1).

Более того, я вижу, что конструктор ComponentA вызывается только один раз в каждом цикле сопоставления и, в частности, непосредственно перед вызовом render () для последнего экземпляра.

Вот (упрощенный) код:

    class ComponentB extends Component {
      constructor(props) {
        super(props) // added upon first reply
        this.handleObjectAdd = this.handleObject.bind(this);
        this.state.objects = [];
      }

      handleObjectAdd() {
        this.state.objects.unshift({prop1: this.state.objects.length + 1});
      }

      render() {
          return (
            <div>
              <button onClick = {this.handleObjectAdd}>ADD</button>
              { this.state.objects.map((object, index) =>
                  <ComponentA key = {index} details = {object}/>
                )
              }
            </div>
          )
        })
      }
    }

    class ComponentA extends Component {
      constructor(props) {
        super(props) // added upon first reply
        console.info('ComponentA constructor called');
        this.state = { details: props.details };
      }
      render() {
        console.info('ComponentA render() called, prop1 value is ' + this.state.details.prop1);
        return (
          <input type = "text" value = {this.state.details.prop1}></input>
        )
      }
    }

Итак, с помощью приведенного выше кода нажатие кнопки ДОБАВИТЬ один раз регистрирует следующее:

    ComponentA constructor called
    ComponentA render() called, prop1 value is 1

Нажатие на кнопку 2 раза регистрирует:

    ComponentA render() called, prop1 value is 1
    ComponentA constructor called'
    ComponentA render() called, prop1 value is 1

При третьем нажатии на кнопку регистрируются:

    ComponentA render() called, prop1 value is 1
    ComponentA render() called, prop1 value is 1
    ComponentA constructor called'
    ComponentA render() called, prop1 value is 1

... и так далее.

Во всех экземплярах ComponentA вводимое текстовое значение равно «1».

Мои вопросы:

1) Как мне его закодировать, чтобы получить желаемое возрастающее значение для ComponentA?

2) Почему конструктор сопоставленного компонента вызывается только один раз и в этой конкретной позиции (непосредственно перед последним визуализированным экземпляром)?

ЗАМЕТКА: Приведенный выше код - это просто упрощенная версия моего фактического кода, показывающая только основные части для демонстрации проблемы.