overlapping layers and edit control issues

[FrankieDuck]

Hello,
I am using react leaflet pixi overlay alongside leaflet draw
I have an issue where the pre-drawn polygons I load are underneath the markers which are rendered from pixi-overlay.
This can be changed with some CSS, such as below:

//polygons below markers
.leaflet-pixi-overlay {
    position: absolute;
    z-index: 105;
}
//polygons above markers
.leaflet-pixi-overlay {
    position: absolute;
    z-index: 105;
}

But with the polygons being below the markers, it means onClick events wont trigger, as effectively there layer is overlapped with the markers layer.

However, when I click the edit button from the draw package these polygons become editable, does anyone know what happens behind the scenes to "hoist" this polygon layer up to make it editable? effectively, I would like to trigger the editing of these polygons on a separate button click, but with the onClicks not working and changing the z-index through react state and a button failing, I am looking for other options?
Is there something in the _onEditStart that could help?
thank you for any help