d3.hierarchy not giving x, y, r values

Question

I am trying to create a bubble plot in d3. This is my code:

dataset = {
    "children": [
      {
        "children": [
          { "Name": "Olives", "Count": 4319 },
          { "Name": "Tea", "Count": 4159 },
          { "Name": "Mashed Potatoes", "Count": 2583 },
          { "Name": "Boiled Potatoes", "Count": 2074 },
          { "Name": "Milk", "Count": 1894 },
          { "Name": "Chicken Salad", "Count": 1809 },
          { "Name": "Vanilla Ice Cream", "Count": 1713 },
          { "Name": "Cocoa", "Count": 1636 },
          { "Name": "Lettuce Salad", "Count": 1566 }
        ]
      }
    ]
  };

  renderChart() {
    let diameter = 600;
    let height = 400;
    let width = 600;
    let width2 = 200;
    let color = d3.scaleOrdinal(d3.schemeCategory10);

    let bubble = d3.pack()
      .size([width, height])
      .padding(1.5);

    let svg = d3.select('#chart')
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("class", "bubble");

    let nodes = d3.hierarchy(this.dataset)
      .sum(function (d: any) {
        return d.Count;
      });
   }

When I print out the value of nodes which is supposed to be an object of type d3.hierarchy, it does not contain x, y, or r values.

Object { data: {…}, height: 2, depth: 0, parent: null, children: (1) […], value: 21753 }
​
children: Array [ {…} ]
​
data: Object { children: (1) […] }
​​
children: Array [ {…} ]
​​
<prototype>: Object { … }
​
depth: 0
​
height: 2
​
parent: null
​
value: 21753

The code is the same as this Stackblitz where it is working properly.

Object { data: {…}, height: 2, depth: 0, parent: null, children: (1) […], value: 21753 }
​
children: Array [ {…} ]
​
data: Object { children: (1) […] }
​
depth: 0
​
height: 2
​
parent: null
​
r: 200.00000000000003
​
value: 21753
​
x: 300
​
y: 200

Any idea what is going wrong and how to debug further?

[EDIT] I tried this with d3 library v 5.5.0 as mentioned in the link and d3 v 7.4.0