Edges not connecting properly to nodes in graph

Question

I am using backstage catalog graph to show the relation between different nodes

this is the offical demo of backstage graph: https://demo.backstage.io/catalog-graph?rootEntityRefs%5B%5D=component%3Adefault%2Fplayback-order&maxDepth=%E2%88%9E&unidirectional=true&mergeRelations=true&direction=LR&showFilters=true

and the file which I am customizing is: https://github.com/backstage/backstage/blob/master/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx

below is the customized code which I have done basically I have added text below node and above node:

<g onClick={onClick} className={classNames(onClick && classes.clickable)}>
  <text>
    {type}
  </text>
  <rect
    className={classNames(
      classes.node,
      color === 'primary' && 'primary',
      color === 'secondary' && 'secondary',
    )}
    width={paddedWidth}
    height={paddedHeight}
    rx={10}
  />
  {kind && (
    <EntityKindIcon
      kind={kind}
      y={padding}
      x={padding}
      width={iconSize}
      height={iconSize}
      className={classNames(
        classes.text,
        focused && 'focused',
        color === 'primary' && 'primary',
        color === 'secondary' && 'secondary',
      )}
    />
  )}
  <text
    ref={idRef}
    className={classNames(
      classes.text,
      focused && 'focused',
      color === 'primary' && 'primary',
      color === 'secondary' && 'secondary',
    )}
    y={paddedHeight / 2}
    x={paddedIconWidth + (width + padding * 2) / 2}
    textAnchor="middle"
    alignmentBaseline="middle"
  >
    {displayTitle}
  </text>
<text>
{kind?.toUpperCase()}
</text>
</g>

I found the root cause of the issue is below text tags which I added(when I comment this everything works fine)

 <text>
    {type}
  </text>

 <text>
    {kind?.toUpperCase()}
  </text>

sample output which I am getting:

sample output which I am getting on commenting:

please help me with the same.