How to directly alter chart's 'on hover' legend coloring information

Question

I'm using MaterialUI for a project and needed custom SVG handling to represent the same color in different ways (Ex. Orange vs Striped Orange). I've managed this, however by using SVG's in place of colors, my on hover legend loses the information about what color I'm currently hovering over.

Heres a codesandbox with the issue. Hovering over the piechart doesn't display the correct information, is there anyway to inject my SVG here? or at least have a color show up that is similar to the hovered section? I've tried converting the SVG's into a CSS class but didn't have luck with that, I also tried manually altering the legend using the popper prop but only managed to alter the container of the 'on hover' legend. Any ideas? I'm also open to any suggestions about different frameworks that can manage this.

Code snippet:

    <div style={{ position: "relative" }}>
      <svg width={0} height={0}>
        <defs>
          <pattern
            id="team-a-stripes"
            patternUnits="userSpaceOnUse"
            width="6"
            height="6"
            patternTransform="rotate(45)"
          >
            <rect
              width="3"
              height="6"
              transform="translate(0,0)"
              fill="white"
            />
            <rect
              width="3"
              height="6"
              transform="translate(3,0)"
              fill="orange"
            />
          </pattern>
          <pattern
            id="team-b-pattern"
            patternUnits="userSpaceOnUse"
            width="1"
            height="1"
          >
            <rect width="1" height="1" fill="orange" />
          </pattern>
        </defs>
      </svg>

      <PieChart
        slotProps={{
          legend: {
            labelStyle: { fill: "white" },
          },
        }}
        series={[
          {
            highlightScope: { fade: "global", highlight: "item" },
            paddingAngle: 5,
            cornerRadius: 3,
            innerRadius: 30,
            startAngle: -45,
            data: props.teamData.map((item: PieValueType) => ({
              value: item.value,
              label: item.label,
              color: (item.label as string).includes("Team A Loses")
                ? "url(#team-a-stripes)"
                : "url(#team-b-pattern)",
            })),
          },
        ]}
        height={200}
        sx={(theme) => ({
          [`.${pieArcClasses.root}`]: {
            stroke: theme.palette.background.paper,
            strokeWidth: 2,
          },
        })}
      />

Thanks!