How to control z index of CircleMarker of leaflet react?

Question

I have a polyline and circle markers on my map. For the first rendering, circle markers are on the polyline, which is perfect. But when i fix the data and reload the polyline, it goes on top of the circle markers. Here's my code

<Map>

  <LayerGroup>
     {this.state.dataPolyline &&
        <Polyline color={"#222222"} weight={9}
        positions={dataPolyline.map(lc => [lc.lat, lc.lng])}/>
     }
  </LayerGroup>

  <LayerGroup>
    {this.state.places.map((p)=>
       <CircleMarker
         key={"marker_" + p.id}
         ref={"marker_" + p.id}
         center ={[p.stopLat, p.stopLon]}
         radius={6} weight={2} zIndex={9999}
         color={"#222222"} fillColor={"#FFFFFF"} fillOpacity={0.9} strokeOpacity={0}
       />

  </LayerGroup>
</Map>

Answer 1

Found a solution:) Simply add a parameter 'pane' and set it as the same level of 'marker' ex) pane={"markerPane"}

for further info: https://leafletjs.com/reference-1.7.1.html#map-pane

<CircleMarker
     key={"marker_" + p.id}
     ref={"marker_" + p.id}
     center ={[p.stopLat, p.stopLon]}
     radius={6} weight={2} zIndex={9999}
     color={"#222222"} fillColor={"#FFFFFF"} fillOpacity={0.9} strokeOpacity={0} pane={"markerPane"}
   />