How to use the d3-hierarchy.pack function in d3-hierarchy

calculatePack(props) {
    let pack = d3Pack();
    [
      'radius',
      'size',
      'padding',
      // 'packSiblings',
      // 'packEnclose',
    ].forEach((key) => {
      if (itsSet(props[key])) pack = pack[key](props[key]);
    });
    return pack;
  }

const as = options.as;
  if (!isArray(as) || as.length !== 3) {
    throw new TypeError('Invalid as: it must be an array with 3 strings (e.g. [ "x", "y", "r" ])!');
  }

  let field;
  try {
    field = getField(options);
  } catch (e) {
    console.warn(e);
  }
  if (field) {
    root.sum((d) => d[field]).sort((a, b) => b[field] - a[field]);
  }

  const packLayout = d3Hierarchy.pack();
  packLayout.size(options.size);

  if (options.padding) {
    packLayout.padding(options.padding);
  }
  packLayout(root);

  const x = as[0];
  const y = as[1];
  const r = as[2];
  root.each((node) => {
    node[x] = node.x;
    node[y] = node.y;
    node[r] = node.r;
  });
}

function createGenerator(
    props,
    generator?: Layout
): Layout {
    generator = generator || d3.pack();
    return args.reduce((acc: Layout, arg: string) => {
        const prop = props[arg];
        if (prop) {
            return acc[arg](prop);
        }
        return acc;
    }, generator);
}

const BubbleChart = ({data = [], width, height, svgRef, onDataClick}) => {
  const maxWidth = width - margin.left - margin.right;
  const maxHeight = height - margin.top - margin.bottom;

  const hasBubbles = data.length > 0;

  const bubbles = pack()
    .size([maxWidth, maxHeight])
    .padding(1.5);

  const root = hierarchy({children: data}).sum(d => d.value);

  const nodes = bubbles(root).leaves();
  return (
    <svg height="{height}" width="{width}">
      
        {hasBubbles ? (
          nodes.map((node, i) =&gt; {
            const {data: d, x, y, r} = node;
            return (
              
                {({targetRef, hide, show}) =&gt; {
                  const clippathId = 'clippath-' + i;</svg>

drawBubbles() {
    const bubble = pack()
      .size([
        this.width -
          (this.graphDataMerged.bcgMatrixChart.margin.left +
            this.graphDataMerged.bcgMatrixChart.margin.right) *
            2,
        this.height -
          (this.graphDataMerged.bcgMatrixChart.margin.top +
            this.graphDataMerged.bcgMatrixChart.margin.bottom) *
            2,
      ])
      .padding(1.5);

    const nodes = hierarchy(this.dataSet).sum(
      (data: BcgMatrix) => data.rel_size,
    );

(rawData, sortKey, showTop) => {
      if (rawData.length === 0) {
        return {
          sortKey,
          data: rawData,
          xScale: () => 0,
          yScale: () => 0,
        };
      }

      const sort = getSortByKey(sortKey);
      const data = rawData.sort(sort).slice(0, showTop);

      const pack = packLayout()
        .padding(2)
        .size([Math.min(...dims), Math.min(...dims)]);

      const nodes = { name: 'root', children: [] };

      for (let i = 0; i < data.length; i++) {
        const d = data[i];


        const state = { name: d.State, children: [] };
        nodes.children.push(state);

        for (let j = 0; j < AGES.length; j++) {
          const group = AGES[j];
          const child = { name: `${d.State} - ${group}`, size: d[group] * d.Total };
          state.children.push(child);

withPropsOnChange(['width', 'height', 'padding'], ({ width, height, padding }) => ({
        pack: pack()
            .size([width, height])
            .padding(padding),
    })),
    withStateHandlers(

const drawChart = (parentNode, { tree, nodes, links }, width, height) => {
  const size = Math.min(width, height);
  const layout = d3pack()
    .size([size, size])
    .padding(3);

  const chartNode = select(parentNode);

  const svg = chartNode
    .append("svg")
    .attr("viewBox", [0, 0, size, size])
    .attr("text-anchor", "middle");

  const tooltip = new Tooltip(chartNode);

  let root = d3hierarchy(tree)
    .eachAfter(node => {
      let sum = 0;
      const children = node.children;