Tooltip disappear when mouse move over custom label (using a PieChart)

[nelnico]

So I created a Pie Chart with a custom label component and a custom tooltip using ChakraUI.

The requirements are that the label should show in the center of each slice.
Tooltip must show when the mouse is inside the slice (wether over the the label or not)

Currently the label only shows on some slices (where it's wide enough to accommodate the text). The following problem is ONLY for slices with the label.

When moving the mouse over the slice, the tooltip show, unless you move your mouse over the label, which causes the tooltip to disappear.

The most applicable code (I believe...pretty new to the React world) below:

const CustomChart = ({ data }: ChartProps) => {
  return (
    <PieChart width={400} height={240}>
      <Pie
        data={data}
        dataKey="value"
        innerRadius={50}
        outerRadius={100}
        cx="30%"
        cy="50%"
        labelLine={false}
        label={customLabel}
        style={{ outline: "none" }}
        isAnimationActive={false}
      />
      <Tooltip content={<ChartTooltip />} isAnimationActive={false} />
    </PieChart>
  );
};

const customDonutLabel: PieLabel<CustomDonutLabelRenderProps<ChartDataProps>> = (props) => {
  const slicePercentage = props.payload.value * 100;
  if (slicePercentage < 10) {
    return null;
  }

  const innerRadius = convertToNumber(props.innerRadius);
  const outerRadius = convertToNumber(props.outerRadius);
  const cx = convertToNumber(props.cx);
  const cy = convertToNumber(props.cy);
  const midAngle = convertToNumber(props.midAngle);

  const RADIAN = Math.PI / 180;
  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;

  return (
    <text
      style={{ fontWeight: "semibold", fontSize: "md" }}
      x={cx + radius * Math.cos(-midAngle * RADIAN)}
      y={cy + radius * Math.sin(-midAngle * RADIAN)}
      fill={props.payload.color}
      textAnchor="middle"
      dominantBaseline="middle"
    >
      {Math.round(props.payload.value * 100)}
    </text>
  );
};

const ChartTooltip = (props: ChartTooltipProps) => {
  if (props.active && props.payload && props.payload.length) {
    const { value, name } = props.payload[0];
    const display = `${formatPercentage(value)}% - ${name}`;
    return (
      <ChakraTooltip label={display} openDelay={500}>
        <Text sx={tooltipStyleProps}>{display}</Text>
      </ChakraTooltip>
    );
  }
  return null;
};```