How do I get all Ant Design TreeNodes to be disabled if they don't have children in React.js?

Question

So I have this renderTreeNodes function...and disabled is bound to this.state.isTreeDisabled, however only tree nodes which have children will become disabled for the duration of the AJAX operation. I'll attach a screen shot below the code. If anyone knows how to address this, I'd appreciate it.

renderTreeNodes(data) {
  if(data === undefined) return [];
  return data.map(item => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.key}
                  dataRef={item} disabled={this.state.isTreeDisabled}
        >
        {this.renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return (<TreeNode {...item} dataRef={item} />);
  });
}

As you can see...they are all TreeNode objects...but for whatever reason...only the 2 which have children are grayed out.

Answer 1

Sorry guys...I'd been staring at too much of the other code for too long...I completely missed the non children TreeNode part at the bottom...I just added the disable={this.state.isTreeDisabled} to it and blam...works

renderTreeNodes(data) {
  if(data === undefined) return [];
  return data.map(item => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.key}
                  dataRef={item} disabled={this.state.isTreeDisabled}
        >
        {this.renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    // sigh...I didn't notice this bottom TreeNode in the recursive structure...
    return (<TreeNode {...item} dataRef={item} disabled={this.state.isTreeDisabled}/>);
  });
}