<ReactCytoscape
    containerID="federation"
    elements={this.getElements()}
    style={this.cyStyle()}
    cyRef={cy => { this.cyRef(cy) }}
    cytoscapeOptions={this.cyOptions()}
    layout={this.cyLayout()}
  />

nodes:

 getElements = () => {
    return {
      nodes: [
        {
          data: { id: "main", name: "", label: "192.168.1.1\n" },
          lock: true,
          position: {
            x: 100,
            y: 200,
          },
        },
        {
          data: { parent: "main" },
          classes: "setting",
          position: {
            x: 900,
            y: 200,
          },
        },
        {
          data: { id: "b" },
        },
        ...this.state.subClusterList,
        ...this.state.settingBtns,
      ],
      edges: [ ...this.state.lines ],
    }

style:

  {
      selector: "node",
      css: {
        "text-valign": "center",
        "text-margin-y": 20,
        "background-color": "-sharpfff",
        shape: "roundrectangle",
        "border-color": "-sharp2db7f5",
        "border-width": 1,
        color: "-sharp2db7f5",
      },
    },
    {
      selector: ".setting",
      css: {
        shape: "rectangle",
        "background-image": setting,
        "border-opacity": 0,
        "background-position-y": "10px",
      },
    },
    {
      selector: "-sharpmain",
      css: {
        "min-width": 140,
        "min-height": 100,
        "background-image": main,
        "background-position-y": "10px",
        "text-background-shape": "roundrectangle",
        "text-background-color": "red",
        "text-max-width": 80,
        "text-wrap": "wrap",
        label: "data(label)",
      },
    },