demo unavailable

[Alt-er]

demo

[Lodin]

You haven't specified the style for the root div in the Node component. You have the following code:

const Node = ({ data: { isLeaf, name }, isOpen, style, toggle }) => (
  <div style={style}>
    {!isLeaf && (
      <button type="button" onClick={toggle}>
        {isOpen ? "-" : "+"}
      </button>
    )}
    <div>{name}</div>
  </div>
);

To make it working, you should change it in the following way:

const Node = ({ data: { isLeaf, name, nestingLevel }, isOpen, style, toggle }) => (
  <div style={{
      ...style,
      alignItems: 'center',
      display: 'flex',
      marginLeft: nestingLevel * 30 + (isLeaf ? 48 : 0),
    }}>
    {!isLeaf && (
      <button type="button" onClick={toggle}>
        {isOpen ? "-" : "+"}
      </button>
    )}
    <div>{name}</div>
  </div>
);

You can also do it using CSS. Demo code uses the direct style assigning just because it is faster and easier to show the main approach.

[Lodin]

If you have any further questions, feel free to reopen the issue!