When Force-directed has root with no children and non-zero topDepth, addChildData to root dataItem doesn't draw links

[sonh1230]

Question
In the initial situation where there are no children in the root and topDepth is greater than 0, if you add children to the root through addChildData, the link is not drawn.

Below is part of the code in my useLayoutEffect.

useLayoutEffect(() => {
  [some code...]
  const series = container.contents.children.push(
    am5hierarchy.ForceDirected.new(root, {
      maskContent: false,
      topDepth: 1,
      downDepth: Infinity,
      idField: 'id',
      categoryField: 'name',
      childDataField: 'children',
      maxRadius: am5.percent(5),
      minRadius: am5.percent(5),
      nodePadding: 20,
      fillField: 'color',
    })
  );
  series.data.setAll([
    {
      id: 'root',
      name: 'Root',
      children: [],
    },
  ]);
  [some code...]
}, []);

And this is simple button to add nodes by addChildData methods.

<button
  onClick={() => {
    const series = seriesRef.current;
    if (series) {
      const rootDataItem = series.getDataItemById('root');
      if (rootDataItem) {
        series.addChildData(rootDataItem, [
          {
            id: 'test',
            name: 'test',
            children: [
              { id: 'a', name: 'a' },
              { id: 'b', name: 'b' },
              { id: 'c', name: 'c' },
            ],
          },
        ]);
      }
    }
  }}
>
  TEST
</button>

Environment (if applicable)
NEXT 14 / REACT 18

Additional context

2025-01-14.5.14.51.mov

[martynasma]

Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

[sonh1230]

At CodePen, the root circle is drawn first no matter what the topDepth is...
Anyway here is my CodePen.
https://codepen.io/nyakvzry-the-encoder/pen/ByBxbwp
If you set topDepth to 0 and press the button, the link is drawn. But if you set topDepth to 1 and press the button, you can see that the link is not drawn.