Labels are triggering onMouseOut

[roshcagra]

Looks like svg labels aren't being rendered as children of the segment paths, so when hovering over the element, it triggers an onMouseOut event, which is not what I was expecting and messes with some hover interactions I am trying to enable.

Let me know if this isn't clear and you'd like a reproduction!

[roshcagra]

I was able to get around this by using custom labels and adding onMouseOver and onMouseOut triggers to them (in addition to setting the onMouseOver and onMouseOut event handlers on my PieChart):

const [focusedSegment, setFocusedSegment] = useState<number>();


<PieChart
        data={formattedDataPoints}
        label={({ x, y, dx, dy, dataEntry, dataIndex }) => (
          <text
            x={x}
            y={y}
            dx={dx}
            dy={dy}
            dominant-baseline="central"
            text-anchor="middle"
            style={{
              fontSize: "5px",
            }}
            fill="#FFFFFF"
           // If a segment's label is focused, consider the segment focused
            onMouseOver={() => setFocusedSegment(dataIndex)}
            onMouseOut={() => setFocusedSegment(undefined)}
          >
            {`${Math.round(dataEntry.percentage)}%`}
          </text>
        )}
        onMouseOver={(_, index) => {
          setFocusedSegment(index);
        }}
        onMouseOut={() => {
          setFocusedSegment(undefined);
        }}
        // If a segment is focused, we want to dim all of the other segments
        segmentsStyle={(dataIndex) => ({
          opacity:
            focusedSegment === undefined || focusedSegment === dataIndex
              ? undefined
              : OPACITY,
        })}