In your example, it seems, you are trying to build the tree where each node that has children will also be a tree.

In this case, render will look like this:

{/*The node below should act as the root node for now */}
<TreeItem nodeId={props.id} label={props.name}>
    {childNodes || [<div key="stub" />]} // stub div is used so user could see expand icon
</TreeItem>
// you also need to pass props for root items
ReactDOM.render(<MyTreeItem id="1" name="Applications" />, rootElement);

You can check the working code here: https://codesandbox.io/s/material-demo-k5ol6

There are multiple ways to render a tree. One is to model a tree structure and render it in a way so each node that has children would no longer be a whole another tree with local state, like in your implementation. The advantage of this approach is that you can provide a complete tree via props, not only by fetching it on 'expand' action.

Here's the example of such an approach: https://codesandbox.io/s/material-demo-h6zfe

Also, you could render the tree as a list, where each nested level has an offset specified via styles. This has an advantage when you need to have a pagination on each level separately (in case if a single level has a lot of items). The implementation is not as easy as in the cases above, so I will not provide an example.

Probably you didn't set the callback when you try to control it. (Same as TextField's value and onChange)
TreeView API document here
You can find there the callback onNodeToggle
Set it will fix this problem.

well I create a service with two functions

getRootNodes(){}

and

getChildren(node:any){}

getRootNodes, return the first level of root.

getChildren(nodes:any), return the "children". But, not only return an array of strings, I make this return an array of object with a propertie "isExpandable". For material-tree is necesary know when a children has children

The next change is usign our service in the DinamicDataSource. Our toggleNode must use of the service. if !expands is the code that was under the setTimeOut, Well, we don't need a setTimeOut, of course.

If expand=true, we call to the service and subscribe to the data. INTO the subscribe the code under the setTimeOut.

See that in both case we need call to this.dataChange.next(this.data)

toggleNode(node: DynamicFlatNode, expand: boolean) {
    const index = this.data.indexOf(node);
    if (!expand)
    {
      let count = 0;
        for (let i = index + 1; i < this.data.length
          && this.data[i].level > node.level; i++, count++) {}
        this.data.splice(index + 1, count);
        this.dataChange.next(this.data);
    }
    else
    {
    node.isLoading = true;
    this.dataService.getChildren(node.item).subscribe(children=>{
      if (!children || index < 0) { // If no children, or cannot find the node, no op
        node.isLoading = false;

        return;
      }
      if (expand) {
        const nodes = children.map(obj =>
          new DynamicFlatNode(obj.name, node.level + 1, obj.isExpandable));
        this.data.splice(index + 1, 0, ...nodes);
      }
      node.isLoading = false;
      // notify the change
      this.dataChange.next(this.data);

    })
    }
  }

The last change is pass to a ngOnInit the functions of the constructor in the TreeDynamicExample

ngOnInit()
  {
    this.treeControl = new FlatTreeControl<DynamicFlatNode>(this.getLevel, this.isExpandable);
    this.dataSource = new DynamicDataSource(this.treeControl, this.dataService);
    this.dataService.getRootNodes().subscribe(res=>{
      this.dataSource.data = res.map(name => new DynamicFlatNode(name, 0, true));
    })
  }

See that, before equal this.dataSourceData to a DynamicFlatNode, we need get the data and make it in the subscribe

Update: Demystifying the DinamicData Source.

Well, to understand the tree-dinamic we can take a look at what is "data" in DynamicData Source. This data it's only an array of object with the properties: item,level,expandable and loading. So, it's look like

[
{item: "Fruits",level:0,expandable:true,isLoading:false},
{item: "Apple",level:1,expandable:true,isLoading:false},
{item: "Orange",level:1,expandable:false,isLoading:false},
{item: "Bannana",level:1,expandable:false,isLoading:false},
{item: "Vegetables",level:0,expandable:true,isLoading:false}
]

Yes, it's just a simple array. But it's an array ordered. So we can create a function addNode in our DinamicDataSource, like

  addSubNode(index:number,name:string,isExpandable:boolean)
  {
     const node=this.data[index];
     const dfn={item: name,
         level:node.level+1,
         expandable:isExpandable,
         isLoading:false}
     this.data.splice(index + 1, 0, ...[dfn]);
     this.dataChange.next(this.data);
  }

  addNode(index:number,name:string,isExpandable:boolean)
  {
     const node=this.data[index];
     const dfn={item: name,
         level:node.level,
         expandable:isExpandable,
         isLoading:false}
     this.data.splice(index + 1, 0, ...[dfn]);
     this.dataChange.next(this.data);
  }

  changeNode(index:number,name:string)
  {
     this.data[index].item=name;
  }

See that, after change the array -adding a node/subnode we need call to this.dataChange.next(this.data), because a splice change the "content" of the array, but not the array itselft. We can also do some "bizarro" as

 this.data=[...this.data]

but the guys of Angular Material make us our live easy and we can use .next (It's the reason because data really ist not an array else the value of a BehaviorSubject)

I hope this aclaration remove the "magic" of the dinamic-tree. I forked the stackblitz to add tree simple buttons to add a node, add a subnode and change the node