cannot change zindex in react-konva

Question

my first component got replaced with the last component i want to make combination image but if i try using many layer it work but make my website performace slower

i try to make all with layer one on one it work but make it slower i try using react konva group still got replaced

<Stage width={window.innerWidth} height={window.innerHeight}>

<Layer>
    <SandaranTengahIMG KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
    <KainTemplateSandaranTengah KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
</Layer>

<Layer>
    <SandaranTumpukIMG KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
    <KainTemplateSandaranTumpuk KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
</Layer>
<Layer>
    <SandaranLuarIMG KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
    <KainTemplateSandaranLuar KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
</Layer>
<Layer>
    <SandaranSiungIMG KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
    <KainTemplateSandaranSiung KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
</Layer>
<Layer>
    <SandaranSiungAtasIMG KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
    <KainTemplateSandaranSiungAtas KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
</Layer>
<Layer>
    <SandaranSiungBawahIMG KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
    <KainTemplateSandaranSiungBawah KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
</Layer>
<Layer>
    <SandaranBadanAtasIMG KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
    <KainTemplateSandaranBadanAtas KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
</Layer>
<Layer>
    <SandaranKepalaLuarIMG KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
    <KainTemplateSandaranKepalaLuar KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} />
</Layer>
<Layer>
<SandaranIMG BENANG={BENANG} KAIN={DATAKAIN} SKJAHITAN={props.JAHITAN} DATAJAHITANSANDARAN={DATAJAHITANSANDARAN} />
</Layer>

</Stage>

i hope is do it like this but not with many layer

enter image description here

any solution?