response-mapbox-gl-geocoder не обновляется в дочернем компоненте после того, как родительский объект перерисовывает его

Question

У меня есть список адресов, которые я рендерил из родительского компонента, используя функцию listAddresses. Он устанавливает строку из трех столбцов, где первая строка представляет собой геокодер Mapbox, вторая представляет собой текстовый ввод response- bootstrap Form.Control, а последняя представляет собой p-тег, который для тестирования предполагается использовать. удалить всю строку при нажатии.

Работает так, как предназначено для элемента управления формы и p-тега, но столбец Geocoder удаляет только последний элемент в списке, когда любой из p-тегов нажат для запуска функция removeLetter. Изображения этого прилагаются.

Я пытаюсь удалить всю строку, соответствующую p-тегу, по которому щелкнули. На первом прикрепленном мною изображении показаны дочерние компоненты Locations, отображающие адреса, переданные в качестве подпорки от родителя. Во втором он показывает результат того, что происходит, когда нажимается p-тег, соответствующий букве «a»; правильный p-тег и соответствующий вход Form.Control удаляются корректно, но удаляется неправильный (самый последний) геокодер.

// In Locations.js - the child component

listAddresses = () => {
    let addresses = []
    for(let i=0; i<this.props.addresses.length; ++i) {
        addresses.push(
            <div id='addressGrid' key={i}>
                <Geocoder
                    initialInputValue={this.props.addresses[i]}
                    //value={this.props.addresses[i]}.  <---- I tried this as well
                    mapboxApiAccessToken={mapboxApiAccessToken}
                    updateInputOnSelect={true}
                    viewport={this.props.viewport}
                    onSelected={(viewport, item)=>{
                        console.log(viewport, ' ', item)
                        this.props.addAddress({
                                address: item.place_name,
                                addressLongitude: item.geometry.coordinates[0],
                                addressLatitude: item.geometry.coordinates[1]
                            }
                        , this.props.index) }}
                        showLoader={true} />
                <Form.Control type='text' value={this.props.addresses[i] + 1} />
                <p onClick={()=>this.props.removeLetter(i)}>{this.props.addresses[i]}</p>
            </div>)
    }
    return addresses
}

removeLetter = index => {
    let addresses = [...this.state.addresses]
    addresses.splice(index, 1)
    this.setState({addresses})
}

Родительский компонент инициализирует адреса так же, как и перед передачей их в качестве реквизитов дочерний компонент:

// In Parent component 

this.state = {
   addresses: ['a', 'b', 'c']
}

<Locations 
    addresses={this.state.addresses} 
    addAddress={this.addAddress}
    removeAddress={this.removeAddress}
    removeLetter={this.removeLetter}
    viewport={this.state.viewport}
    setViewport={this.setViewport}
    moveViewport={this.moveViewport} />

Изображение рендеринга начальных адресов

Изображение адресов после p-тега, соответствующего букве 'a', нажатой