using leaflet-react how can I control the svg output of `<geojson>`

I am currently using <GeoJSON> to display a featureCollection of polygons on a map. This outputs svg similar to:

<svg>
    <g>
        <path...></path>
        <path...></path>
        <path...></path>
        <path...></path>
    </g>
</svg>

Each of my geojson features comes out as a path - but we would like to be able to control the rendering of the features to be able to wrap them in a group and also include an icon and some text, such as:

<svg>
    <g class="group">
        <g class="status">
            <path...></path>
            <image x="" y="" xlink:href="image.png"></image>
            <text x="" y="">
                ...
            </text>
        </g>
        <g class="status">
            <path...></path>
            <image x="" y="" xlink:href="image.png"></image>
            <text x="" y="">
                ...
            </text>
        </g>
        <g class="status">
            <path...></path>
            <image x="" y="" xlink:href="image.png"></image>
            <text x="" y="">
                ...
            </text>
        </g>
    </g>
</svg>

I am very new to leaflet in general and leaflet-react even more so - ive looked through the documentation but I am probably not looking for the right terms. Do I maybe need to use something besides <GeoJSON>? Thanks for any help and let me know if I can expand on anything.