Not hovering over the dot under multiple layers in reCharts, React

I am working on reCharts where i am facing one bug in the chart , there are multiple Areas in the surface and multiple dots to hover, but i a unable to hover on some of the dots.

Code i am using:

case ChartTypes.Area: {
    const {mode, dotColorFormat, stackId, lineWidth, lineType, dotSize, connectNulls} = chart;
    const dataKeySuffix = mode === 'stacked100Percent' ? 'percent' : 'value';
    const colorFormat = dotColorFormat ? getFormatter(dotColorFormat) : undefined;
    const dataKey = `${valueKey}.${dataKeySuffix}`;
    const valueAccessor = getLabelValueAccessor({valueKey});

    return (
      <Area
        key={`area-${seriesIx}`}
        name={label}
        dataKey={dataKey}
        stackId={stackId}
        fill={color}
        stroke={color}
        strokeWidth={lineWidth}
        type={lineType}
        activeDot={
          !hideActiveDots && (
            <CustomizedDot
              r={dotSize}
              colorFormat={colorFormat}
              active={true}
              cursor={this.getCursor}
              seriesIx={seriesIx}
              onCustomizedMouseOver={setSeries}
              onMouseOut={setTooltipInactive}
              z-index="222"
              index={222}
            />
          )
        }
        dot={!hideDots &&  <CustomizedDot r={dotSize} colorFormat={colorFormat} index={222} z-index="2"/> }
        connectNulls={connectNulls}
        xAxisId={xAxisId}
        yAxisId={yAxisId}
        isAnimationActive={animationActive}
        onAnimationStart={onAnimationStart}
        onAnimationEnd={onAnimationEnd}
      >
        <Layer>
        {showSignificance && (
          <LabelList dataKey={valueAccessor} content={<CustomizedAreaLabel dotSize={dotSize} />} />
        )}
        </Layer>
      </Area>
    );
}

I tried giving index to customisedDot component but that does not help , I want to enable it to hover on every dot, Any suggestion would be helpfull.

Thanks

I was able to solve this with our application by rendering each actual series as two separate rechart series: 1 for the shaded fill area, and 1 for the line/dots.

Something like this:

<Chart>
    <CartesianGrid .../>
    <XAxis .../>
    <YAxis .../>

    //do one pass through all series and render just the "fill" part
    {series.map(s => <Area
        key={s.id + "-area-background"} //make sure the key is different or stuff will break!
        dot={false} //hide the dot
        activeDot={false} //hide the active dot
        strokeWidth={0}
        fill="[mycolor]"
        legendType="none" //hide in the legend
        tooltipType="none" //hide in the tooltip
        ...
    />)}
    
    //now loop through the series again and render the line and dot part
    {series.map(s => <Area 
        dot={renderDotStuff}
        activeDot={renderActiveDotStuff}
        strokeWidth={3}
        fill="none" //hide the fill
        ...
    />)}
    ...
</Chart>