Why are my Cytoscape fcose constraints not working?

Question

What I am trying to achieve is something that looks like this:

The output when running the code snippet can be variable. However, I have seen a result that looks like:

The relativePlacementConstraint should keep the icon (green circle) on the left and the text (hello) on the right. The horizontal alignmentConstraint should align them so that their vertical centers are aligned.

However, I have seen every possible relative position of the icon and text, when the constraints should make it deterministic.

const greenCircleSVG = `<svg 
    viewBox="0 0 16 16" 
    xmlns="http://www.w3.org/2000/svg">
  <circle style="fill:#00ff00;stroke-width:1.32292" cx="8" cy="8" r="8" />
</svg>`;

const encodedGreenCircleSVG =
  "data:image/svg+xml;utf8," + encodeURIComponent(greenCircleSVG);

const cy = cytoscape({
  container: chart, // container to render in

  boxSelectionEnabled: false,

  style: [
    {
      selector: "node",
      css: {
        content: "data(id)",
        "text-valign": "center",
        "text-halign": "center"
      }
    },
    {
      selector: "#label",
      css: {
        label: "",
        "background-color": "gray",
        "border-width": "2",
        "border-color": "red",
        shape: "round-rectangle"
      }
    },
    {
      selector: "edge",
      css: {
        "curve-style": "bezier",
        "target-arrow-shape": "triangle"
      }
    },
    {
      selector: "#icon",
      css: {
        "background-image": encodedGreenCircleSVG,
        label: ""
      }
    },
    {
      selector: "#text",
      css: {
        label: "Hello",
        width: "label",
        shape: "rectangle",
        "background-opacity": "0"
      }
    },
    {
      selector: "#connection",
      css: {
        "line-opacity": "0",
        "target-arrow-shape": "none"
      }
    }
  ],

  elements: {
    nodes: [
      { data: { id: "label" } },
      { data: { id: "icon", parent: "label" }, position: { x: 215, y: 85 } },
      { data: { id: "text", parent: "label" }, position: { x: 300, y: 85 } }
    ],
    edges: [{ data: { id: "connection", source: "icon", target: "text" } }]
  },

  relativePlacementConstraint: [{ left: "icon", right: "text", gap: 500 }],

  alignmentConstraint: { horizontal: [["icon", "text"]] },

  layout: {
    name: "fcose",
    rows: 1
  }
});

.chart {
  color: red;
  width: 1000px;
  height: 400px;
  background-color: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
<script src="https://unpkg.com/cytoscape-fcose/cytoscape-fcose.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<div class="chart" id="chart">
</div>