Hover interactivity with custom shapes

[raki92]

Hey guys,
I am trying to create custom node shape. I managed to draw one with label underneath, but the problem is that text inside both node and the label is flickering when I hover the node. (see gif attached)

This is code that i use to generate and draw node:

export function getNodeStyles(entity) {
  return {
    shape: 'custom',
    size: 24,
    widthConstraint: false,
    borderWidth: 2,
    borderWidthSelected: 2,
    labelHighlightBold: false,
    chosen: false,
    ctxRenderer: ({ ctx, x, y, style }) => {
      return {
        drawNode() {
          const nodeSize = style.size;
          const fontSize = 16;
          // Draw inned circle
          ctx.beginPath();
          ctx.arc(x, y, nodeSize, 0, 2 * Math.PI);
          ctx.fillStyle = entity.color.background;
          ctx.fill();
          ctx.closePath();
          // Draw border
          ctx.beginPath();
          ctx.arc(x, y, nodeSize, 0, 2 * Math.PI);
          ctx.strokeStyle = entity.color.border;
          ctx.lineWidth = 2;
          ctx.stroke();
          ctx.closePath();
          // Draw/add text
          ctx.beginPath();
          ctx.fillStyle = entity.fontColor;
          ctx.font = `${fontSize}px Nunito`;
          ctx.fillText(entity.label, x - nodeSize / 2, y + 2, nodeSize);
          ctx.closePath();
        },
        drawExternalLabel() {
          const r = style.size;
          const labelBoxWidth = 135;
          const labelBoxHeight = 40;
          const fontSize = 12;
          const labelMarginTop = 8;
          const labelX = x - labelBoxWidth / 2;
          const labelY = y + r + labelMarginTop;
          roundedRect(ctx, labelX, labelY, labelBoxWidth, labelBoxHeight, 5);
          // Draw/add text
          const computedLabel = `${entity?.name}\n${entity?.owner || ''}`;
          computedLabel.split('\n').forEach((newLine, i) => {
            ctx.beginPath();
            ctx.font = `${fontSize}px Nunito`;
            ctx.fillStyle = i === 0 ? Colors.WHITE : Colors.GRAY3;
            ctx.textAlign = 'center';
            ctx.fillText(newLine, labelX + labelBoxWidth / 2, labelY + fontSize + i * 16, labelBoxWidth);
            ctx.closePath();
          });
        },
        nodeDimensions: { width: style.size, height: style.size },
      };
    },
  };
}

Where the roundedRect function is looking like this:

function roundedRect(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x, y + radius);
  ctx.arcTo(x, y + height, x + radius, y + height, radius);
  ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
  ctx.arcTo(x + width, y, x + width - radius, y, radius);
  ctx.arcTo(x, y, x, y + radius, radius);
  ctx.fillStyle = Colors.DARK_GRAY5;
  ctx.fill();
  ctx.closePath();
}

Network options that I am setting are:

{
  physics: true,
edges: {
    smooth: {
      enabled: true,
      type: 'cubicBezier',
      forceDirection: 'horizontal',
      roundness: 0,
    },
    color: '#9582B4',
    width: 1,
  },
  interaction: {
    zoomSpeed: 0.4,
    navigationButtons: false,
    hover: true,
    dragNodes: false,
  },
  layout: {
    randomSeed: 1,
    improvedLayout: false,
    hierarchical: {
      direction: 'LR',
      sortMethod: 'directed',
      parentCentralization: false,
      nodeSpacing: 150,
      levelSeparation: 300,
      shakeTowards: 'roots',
      treeSpacing: 200,
      edgeMinimization: true,
    },
  },
}

I discovered that if I turn of, interaction.hover everything will work as expected.
I tried to put chosen prop to function and to return null but that did not work as well.

Is there any way to prevent hover effect on custom shape node or is there any other solution for this problem that I might not see ?