title: Removing icon when there are no children
body: <p>I'm building a TreeView with the Treeview component from Material UI: <a href="https://material-ui.com/components/tree-view/" rel="nofollow noreferrer">https://material-ui.com/components/tree-view/</a></p>
  
  <p>I have created the component below which fetches data when a node is expanded. Furthermore, the tree is build so each node that have children also is a tree of <code>MyTreeItem</code>, but I have one question:</p>
  
  <p>When I reach a point where there are no more children, I want to remove/hide the expand/collapse icon. How can i achieve this?</p>
  
  <pre><code>import ReactDOM from "react-dom";
  import React from "react";
  import TreeView from "@material-ui/lab/TreeView";
  import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
  import ChevronRightIcon from "@material-ui/icons/ChevronRight";
  import TreeItem from "@material-ui/lab/TreeItem";
  const { useState, useCallback } = React;
  
  export default function MyTreeItem(props) {
    const [childNodes, setChildNodes] = useState(null);
    const [expanded, setExpanded] = React.useState([]);
  
    function fetchChildNodes(id) {
      return new Promise(resolve =&gt; {
        setTimeout(() =&gt; {
          resolve({
            children: [
              {
                id: "2",
                name: "Calendar"
              },
              {
                id: "3",
                name: "Settings"
              },
              {
                id: "4",
                name: "Music"
              }
            ]
          });
        }, 1000);
      });
    }
  
    const handleChange = (event, nodes) =&gt; {
      const expandingNodes = nodes.filter(x =&gt; !expanded.includes(x));
      setExpanded(nodes);
      if (expandingNodes[0]) {
        const childId = expandingNodes[0];
        fetchChildNodes(childId).then(
          result =&gt;
            result.children
              ? setChildNodes(
                  result.children.map(node =&gt; (
                    &lt;MyTreeItem key={node.uuid} {...node} action={props.action} /&gt;
                  ))
                )
              : console.log("No children") // How do I remeove the expand/collapse icon?
        );
      }
    };
  
    return (
      &lt;TreeView
        defaultCollapseIcon={&lt;ExpandMoreIcon /&gt;}
        defaultExpandIcon={&lt;ChevronRightIcon /&gt;}
        expanded={expanded}
        onNodeToggle={handleChange}
      &gt;
        {/*The node below should act as the root node for now */}
        &lt;TreeItem nodeId={props.id} label={props.name}&gt;
          {childNodes || [&lt;div key="stub" /&gt;]}
        &lt;/TreeItem&gt;
      &lt;/TreeView&gt;
    );
  }
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;MyTreeItem id="1" name="Applications" /&gt;, rootElement);
  
  
  </code></pre>