I am using treebeard library in react to form a left navigation menu.When data is statically provided everything works fine and i can toggle nodes and all there children. The code is shown below:

import React, { PureComponent } from 'react';
import { Treebeard } from 'react-treebeard';

const data = {
    toggled: false,
    name:cricket,
    children: [
        {
            name: 'Ipl',
            children: [
             { name: 'CSK VS DD' },
                { name: 'MI VS RCB' }
            ]
        },

        {
            name: 'International Series',
            children: [
                {
                    name: 'AUS vs NZ',
                    children: [
                        { name: 'T20' },
                        { name: 'ODI' }
                    ]
                }
            ]
        }
    ]
};

class Tree extends PureComponent {

    constructor(props) {
        super(props);
        this.state = { data };
        this.onToggle = this.onToggle.bind(this);
    }

    onToggle(node, toggled) {
        const { cursor, data } = this.state;
        if (cursor) {
            console.log(data);
            this.setState(() => ({ cursor, active: false }));
        }
        node.active = true;
       
        if (node.children) {
            node.toggled = toggled;
        }
        this.setState(() => ({ cursor: node, data: Object.assign({}, data) }));
    }

    render() {
        const { data } = this.state;

        return (
            <Treebeard
                data={data}
                onToggle={this.onToggle}
            />
        );
    }
}


export default Tree;

But when i am trying to add children dynamically in the root nodes and add children to its children then i am able to toggle root node but not its children. Also the data object is showing nodes,its children and there children correctly on console.log(data). The code is shown below:

import React, { PureComponent } from 'react';
import { Treebeard } from 'react-treebeard';

const data = {
    toggled: false,
    name:'cricket',
    children: []
};

class Tree extends PureComponent {

    constructor(props) {
        super(props);
        this.state = { data };
        this.onToggle = this.onToggle.bind(this);
    }

    addChildren = (data) => {
       
        data.children = [
            {
                name: "Sussex v Essex"
            },
            {
                name: "Hampshire v Kent"
            },
            {
                name: "Middlesex v Surrey"
            },
            {
                name: "Yorkshire v Lancashire"
            }
        ]
    }

    onToggle(node, toggled) {
        const { cursor, data } = this.state;
        if (cursor) {
            console.log(data);
            this.setState(() => ({ cursor, active: false }));
        }
        node.active = true;
        
        data.children=[
            {
                name:'IPL'
            },
            {
                name:'T20'
            }
        ]
        this.addChildren(data.children[0]);
        
        if (node.children) {
            node.toggled = toggled;
        }
        this.setState(() => ({ cursor: node, data: Object.assign({}, data) }));
    }

    render() {
        const { data } = this.state;

        return (
            <Treebeard
                data={data}
                onToggle={this.onToggle}
            />
        );
    }
}


export default Tree;

Sandbox Link: