title: SVG overlapping shapes with Recharts
body: <p>I am using Recharts to create a simple pie chart.
  My issue likely stems from the fact the entire thing is SVG-based.
  I would like to have a selected pie slice change color (both fill and stroke).
  So I do the following:</p>
  <pre class="lang-js prettyprint-override"><code>import { useState } from 'react';
  import { Sector, Pie, PieChart, ResponsiveContainer } from 'recharts';
  
  export function SinglePie({ data }) {
      const [selectedCellLabel, setHighlightedCell] = useState(undefined);
  
      const onMouseEnter = (event) =&gt; setHighlightedCell(event.payload.payload.label);
      const onMouseLeave = () =&gt; setHighlightedCell(undefined);
  
      function renderActiveShape(props) {
          return &lt;Sector {...props} fill=&quot;#CFBCF7&quot; stroke=&quot;#7C53E4&quot; /&gt;;
      }
  
      return (
          &lt;ResponsiveContainer width=&quot;100%&quot; height=&quot;100%&quot;&gt;
              &lt;PieChart&gt;
                  &lt;Pie
                      data={data}
                      activeIndex={data.findIndex((datum) =&gt; datum.label === selectedCellLabel)}
                      activeShape={renderActiveShape}
                      dataKey={ChartDataKeys.VALUE}
                      nameKey={ChartDataKeys.LABEL}
                      fill=&quot;#CEF1EE&quot;
                      stroke=&quot;#64E0D5&quot;
                      onMouseEnter={onMouseEnter}
                      onMouseLeave={onMouseLeave}
                  /&gt;
              &lt;/PieChart&gt;
          &lt;/ResponsiveContainer&gt;
      );
  }
  </code></pre>
  <p>Then render with:</p>
  <pre><code>&lt;div style={{ width: 250, height: 250 }}&gt;
      &lt;SinglePie data={[
          {
              label: 'First Slice',
              value: 4,
          },
          {
              label: 'Second Slice',
              value: 6,
          },
          {
              label: 'Third Slice',
              value: 2,
          },
      ]} /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And unfortunately, on hovering the First Slice, what I see is this:</p>
  <p><a href="https://i.stack.imgur.com/g1SjJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g1SjJ.png" alt="enter image description here" /></a></p>
  <p>However, hovering the Third Slice looks ok:</p>
  <p><a href="https://i.stack.imgur.com/U8Hq9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U8Hq9.png" alt="enter image description here" /></a></p>
  <p>You can see the difference between stroke width in the two cases. this is because the SVG slices overlap each other.
  I know that SVG rendering is based on order, and adding a <code>z</code> prop won't help. But what will?</p>
  <p>I would like to be able to see all slices with their strokes, as is required by my UI designer:</p>
  <p><a href="https://i.stack.imgur.com/tjZuZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tjZuZ.png" alt="enter image description here" /></a></p>