Как правильно привязать вложенные объекты к текстовым вводам с помощью избыточности

У меня есть объект класса Entities, который добавляет себя к редуктору сущностей, используя идентификатор в качестве своего ключа. В свойствах другого класса мне нужно использовать каждое из свойств объекта сущности для создания текстовых входов.

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

У меня есть класс Сущности:

import React from 'react';
import { connect } from 'react-redux';
import { updateSelected, addEntity } from '../actions';

class Entity extends React.PureComponent {
  constructor(props) {
    super(props);
    this.identityContainer = {
      id: "abcdef",
      type: "person",
      properties: {
        name: {
          label: "Name", 
          type: "string", 
          value: "", 
          optional: true
        },
        favorite_icecream: {
          label: "Favorite Ice Cream", 
          type: "string", 
          value: "", 
          optional: true
        }
      }
    }
    this.props.addEntity(this.identityContainer);
  }
  handleSelected() {
    this.props.updateSelected(this.identityContainer.id)
  }
  render() {
    return (
        <div onMouseUp = {() => this.handleSelected()}></div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    selectedEntity: state.selectedEntity
  }
}
const mapDispatchToProps = () => {
  return {
    updateSelected,
    addEntity
  }
}
export default connect(mapStateToProps, mapDispatchToProps())(Entity);

Теперь вот мой класс PropertiesWindow:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { updateProperty } from '../actions';

class PropertiesWindow extends Component {
    get selectedEntity() {
        return this.props.entities[this.props.selectedEntity];
    }
    handleUpdateEntity(id, name, value) {
        this.props.updateProperty(id, name, value);
    }
    createListItems() {
        for (const [name, property] of Object.entries(this.selectedEntity.properties)) {
            return (
                <li key = {this.props.selectedEntity + property.name} className = "text-input-container">
                    <label htmlFor = {this.props.selectedEntity}>{property.label}</label>
                    <input 
                        type = "text" 
                        id = {this.props.selectedEntity} 
                        name = {name}
                        value = {property.value}
                        onChange = {e => this.handleUpdateEntity(this.selectedEntity.id, name, e.target.value)}
                    />
                </li>
            )
        }
    }
    render() {
        return (
            <ul>
                {this.createListItems()}
            </ul>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        selectedEntity: state.selectedEntity,
        entities: state.entities
    }
}
const mapDispatchToProps = () => {
  return {
    updateProperty
  }
}

export default connect(mapStateToProps, mapDispatchToProps())(PropertiesWindow);

действия:

export const updateSelected = (id) => {
    return {
        type: 'SELECTED_ENTITY_UPDATED',
        payload: id
    }
}
export const addEntity = (entity) => {
    return {
        type: 'ENTITY_ADDED',
        payload: {...entity}
    }
}
export const updateProperty = (id, property, value) => {
    return {
        type: 'PROPERTY_CHANGED',
        payload: {id, property, value}
    }
}

редукторы:

import {combineReducers} from 'redux';

export const selectedEntityReducer = (state = null, action) => {
    switch (action.type) {
        case 'SELECTED_ENTITY_UPDATED':
            return action.payload;
        default: 
            return state;
    }
}

export const entitiesReducer = (state = {}, action) => {
    switch (action.type) {
        case 'ENTITY_ADDED':
            state[action.payload.id] = action.payload;
            return state;
        case 'PROPERTY_CHANGED':
            state[action.payload.id].properties[action.payload.property] = action.payload.value;
            return state;
        default: return state;
    }
}

export default combineReducers({
    selectedEntity: selectedEntityReducer,
    entities: entitiesReducer
});

После ввода в текстовое поле я регистрирую это из action.payload:
updateProperty: Object { id: "abcdef", property: "name", value: "a" }
updateProperty: Object { id: "abcdef", property: "name", value: "s" }
updateProperty: Object { id: "abcdef", property: "name", value: "d" }
updateProperty: Object { id: "abcdef", property: "name", value: "f" }

Если бы кто-то мог помочь мне понять, что я делаю неправильно, я был бы очень признателен. Я пытался решить эту проблему разными способами, включая использование массива для свойств и массива для сущностей вместо объектов. Ничто из того, что я пробовал, не имело никакого значения.

Обновлено:
Я создал codeandbox здесь: https://codesandbox.io/s/gracious-leakey-vzio6