Connections at the React project crush each other

There are two nodes and there are 4 ports on them.
Two points are connected to each other from different nodes.
Among these nodes, trying to find the shortest path when different points are reconnected.
RelikingTool change connection start and end points.
The examples on the links are working correctly.

I am doing an example :
this.Diagram.linkTemplate =
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
routing: go.Link.AvoidsNodes,
// adjusting: go.Link.Stretch,
curve: go.Link.JumpOver,
corner: 5,

                //mouse-overs subtly highlight links:
                mouseEnter: function (e: any, link: any) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
                mouseLeave: function (e: any, link: any) { link.findObject("HIGHLIGHT").stroke = "transparent"; }
            new go.Binding("points").makeTwoWay(),
            //new go.Binding("routing", "routing", go.Binding.parseEnum(go.Link, go.Link.AvoidsNodes))
            //    .makeTwoWay(go.Binding.toString),
            goMake(go.Shape,  // the highlight shape, normally transparent
                { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
            goMake(go.Shape,  // the link path shape
                { isPanelMain: true, stroke: "gray", strokeWidth: 2 }),
            goMake(go.Shape,  // the arrowhead
                { toArrow: "standard", stroke: "gray", fill: "gray" }),

    this.Diagram.addDiagramListener("LinkDrawn", (e: go.DiagramEvent) => { });  
    this.Diagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
    this.Diagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;

this.Diagram.nodeTemplate =
goMake(go.Node, “Spot”, this.nodeStyle(),
new go.Binding(“location”, “location”),
goMake(go.Panel, “Vertical”,
{ fromLinkable: true, toLinkable: true, cursor: “pointer”, },
goMake(go.Picture, {
maxSize: new go.Size(100, 100),
new go.Binding(“source”, “iconSource”)),
textAlign: “center”,
font: “bold 11pt Helvetica, Arial, sans-serif”,
wrap: go.TextBlock.None,
width: 150,
editable: true
new go.Binding(“text”, “caption”))
makePort(“T”, go.Spot.Top, true, true),
makePort(“L”, go.Spot.Left, true, true),
makePort(“R”, go.Spot.Right, true, true),
makePort(“B”, go.Spot.Bottom, true, true),


return nodeStyle:
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
avoidable: false,
fromLinkableSelfNode: true, toLinkableSelfNode: true,
background: “aliceblue”,
selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate,
resizable: true, resizeObjectName: “PANEL”, resizeAdornmentTemplate: nodeResizeAdornmentTemplate,
locationSpot: go.Spot.Center,
mouseEnter: function (e: any, obj: any) { me.showPorts(obj.part, true); },
mouseLeave: function (e: any, obj: any) { me.showPorts(obj.part, false); }

Could it be because of react ?

I don’t know what React has to do with anything. There are lots of people using GoJS and the React library.

Could you describe more precisely what the problem is that you are having? Some small before-and-after screenshots would help.