I am using d3.treemap to draw a treemap for the following data:

0: root, value:40
  1: soon1, value:30
    2: soon2, value:20
      3: leaf3, value:10
      3: leaf4, value:10
    2: leaf2, value:10
  1: leaf1, value:10

When using d3.hierarchy to transform my data, I ordered it as suggested by documentation, however, leaves 3 and 4 do not appear in my treemap. The rectangles have been created, as can be seen by inspecting the svg, but they are likely behind the parent rectangle.

How can I prevent this from happening?

Below is an observable with the code used to draw and also to manipulate the data:
https://observablehq.com/d/9f4232ce36bb6704

Command used to create the hierarchy:

d3.hierarchy(data)
      .sum(d => d.value)
      .sort((a, b) => b.height - a.height || b.value - a.value)

Final image