react-d3-graph Sticking/Grouping nodes together

Question

I am working with the react library "react-d3-graph". I am trying to display my data set in fashion similar to the Marvel example provided. My data is a little different, in that I may have 1 or more parent nodes, each with children nodes (And each child node can then have children as well). The issue I am trying to solve is that when my graph gets displayed, all the nodes are so spread out and overlap one another. I would like to group each parent node (and their associated child nodes) locally. I noticed that on the the various examples pages (Like the Marvel example) there is a button that says "Unstick". When I click that, all the nodes in the graph become unorganized, which looks like how my graph is displayed. So, how do I "Stick" the nodes so they group by one another? I tried using the generated config, but it does not appear to make a difference. I searched through the documentation and did not see any mention of "Sticking" or "Unsticking" Thanks!

Config

 const myConfig = {
    automaticRearrangeAfterDropNode: true,
    collapsible: true,
    directed: false,
    focusAnimationDuration: 0.75,
    focusZoom: 1,
    freezeAllDragEvents: false,
    height: 800,
    highlightDegree: 2,
    highlightOpacity: 0.2,
    linkHighlightBehavior: true,
    maxZoom: 12,
    minZoom: 0.05,
    nodeHighlightBehavior: true,
    panAndZoom: false,
    staticGraph: false,
    staticGraphWithDragAndDrop: false,
    width: 1000,
    d3: {
      alphaTarget: 0.05,
      gravity: -210,
      linkLength: 100,
      linkStrength: 10,
      disableLinkForce: false,
    },
    node: {
      color: "#d3d3d3",
      fontColor: "black",
      fontSize: 15,
      fontWeight: "normal",
      highlightColor: "red",
      highlightFontSize: 18,
      highlightFontWeight: "bold",
      highlightStrokeColor: "red",
      highlightStrokeWidth: 1.5,
      mouseCursor: "pointer",
      opacity: 0.9,
      renderLabel: true,
      size: 600,
      strokeColor: "none",
      strokeWidth: 1.5,
      svg: "",
      symbolType: "circle",
      labelProperty: "name",
    },
    link: {
      color: "lightgray",
      fontColor: "black",
      fontSize: 8,
      fontWeight: "normal",
      highlightColor: "red",
      highlightFontSize: 8,
      highlightFontWeight: "normal",
      labelProperty: "label",
      mouseCursor: "pointer",
      opacity: 1,
      renderLabel: false,
      semanticStrokeWidth: true,
      strokeWidth: 3,
      markerHeight: 6,
      markerWidth: 6,
      strokeDasharray: 0,
      strokeDashoffset: 0,
      strokeLinecap: "butt",
    },
  };

Data:

{
  "nodes": [
    {
      "id": 351843720888322,
      "name": "parent 3",   
      "symbolType": "circle",
      "color": "blue"
    },
    {
      "id": 369435906932740,
      "name": "child 5",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 387028092977152,
      "name": "sub child",
      "symbolType": "triangle",
      "color": "purple"
    },
    {
      "id": 369435906932741,
      "name": "child 6",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 369435906932742,
      "name": "child 7",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 369435906932743,
      "name": "child 8",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 369435906932744,
      "name": "child 9",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 351843720888321,
      "name": "parent 2",
      "symbolType": "circle",
      "color": "blue"
    },
    {
      "id": 369435906932737,
      "name": "child 2",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 369435906932738,
      "name": "child 3",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 369435906932739,
      "name": "child 4",
      "symbolType": "square",
      "color": "green"
    },
    {
      "id": 351843720888320,
      "name": "parent 1",
      "symbolType": "circle",
      "color": "blue"
    },
    {
      "id": 369435906932736,
      "name": "child 1",
      "symbolType": "square",
      "color": "green"
    }
  ],
  "links": [
    {
      "source": 351843720888322,
      "target": 369435906932740
    },
    {
      "source": 369435906932740,
      "target": 387028092977152
    },
    {
      "source": 351843720888322,
      "target": 369435906932741
    },
    {
      "source": 351843720888322,
      "target": 369435906932742
    },
    {
      "source": 351843720888322,
      "target": 369435906932743
    },
    {
      "source": 351843720888322,
      "target": 369435906932744
    },
    {
      "source": 351843720888321,
      "target": 369435906932737
    },
    {
      "source": 351843720888321,
      "target": 369435906932738
    },
    {
      "source": 351843720888321,
      "target": 369435906932739
    },
    {
      "source": 351843720888320,
      "target": 369435906932736
    }
  ]
}