React: How to receive state information from Component in Array?

I want to create a React app where the user can create a dynamic array of omponents called Object, and each of those objects has it’s own array that can contain more objects. The arrays are stored in the state of the components. But when I try to send the finished array to another component, only the upper-most layer of objects is in that array. Is there an issue with my method of storing the objects? I have noticed that no state of the objects is contained in the sent array.

class CreateMappingPage extends React.Component {
constructor(props) {
    super(props);
    this.handleList = this.handleList.bind(this)
    this.handleValue = this.handleValue.bind(this)
    this.state = {
        mappingArray: [],
        currentKey: 0,
    };
}

handleList() {
    let key = this.state.currentKey.toString()
    this.setState({mappingArray: [
        ...this.state.mappingArray,
        <Object key={key} Id={this.state.currentKey} type="Liste"/>
    ]})
    this.setState({currentKey: this.state.currentKey + 1})
    console.log(this.state.mappingArray)
};

handleValue() {
    let key = this.state.currentKey.toString()
    this.setState({mappingArray: [
        ...this.state.mappingArray,
        <Object key={key} Id={this.state.currentKey} type="Wert"/>
    ]})
    this.setState({currentKey: this.state.currentKey + 1})
};

render() {
    return (
    <Popup className='CreatePage' trigger={<button className='AddButtons'>Add Mapping</button>} position="right center" modal nested>
        <div>
            <h1>Mapping erstellen</h1>
                <div>
                    <AddingPopup handleList={this.handleList.bind(this)}
                    handleValue={this.handleValue.bind(this)} />
                    {this.state.mappingArray}
                <button className='SmallButton' onClick={() => 
     this.props.updateMapping(this.state.mappingArray)}>Speichern</button>
                </div>
        </div>
    </Popup>
    )
}

}

This is the top-level component that stores the entire array in the mappingArray state. Objects can be added into it with the which receives the handleList() and handleValue() methods in it’s props. It will send it’s array on with the updateMapping prop.

class Object extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        listArray: [],
        name: "",
        type: this.props.type,
        currentKey: this.props.Id
    };
}

handleList() {
    let key = this.state.currentKey.toString()
    this.setState({listArray: [
        ...this.state.listArray,
        <Object key={key} Id={this.state.currentKey} type="Liste"/>
    ]})
    this.setState({currentKey: this.state.currentKey + 1})
    console.log(this.state.listArray)
};

handleValue() {
    let key = this.state.currentKey.toString()
    this.setState({listArray: [
        ...this.state.listArray,
        <Object key={key} Id={this.state.currentKey} type="Wert"/>
    ]})
    this.setState({currentKey: this.state.currentKey + 1})
};

updateName = (evt) => {
    this.setState({name: evt.target.value.substr(0, 100)})
}

render() {
    return(      
        <div>
            <div>Typ: {this.state.type}</div>
            <TextField id ="outlined-basic" label="Name" variant="outlined" value={this.state.name} onChange={this.updateName} />
            <AddingPopup handleList={this.handleList.bind(this)}
                handleValue={this.handleValue.bind(this)} />
            {this.state.listArray.length === 0 ? <MappingButton /> : null}
            <div className='InputLevelSub'>
                {this.state.listArray}
            </div>
        </div>
    )
}

This is the object that can be added to the mappingArray state of the above component and it works on much the same way, it has an array into which objects can be inserted in the same way.

updateHeaderMapping(array) {
    console.log(array)
    this.setState({headerMapping: array})
}

     <CreateMappingPage updateMapping = {this.updateHeaderMapping}/>

I then want to sent the mappingArray stored in the CreateMappingPage to another component that then stores it in the state headerMapping.

But the console output of the finished array shows that each of the objects only saved it’s props but not it’s state, only the top level of objects remain.