Leaflet onEachFeature bringToFront doesn't work as exptected with matching layers

Question

Using React-Leaflet, I have an onEachFeature in which it checks if each layer shares a "group_id" with the currently selected layer and if that is the case, use layer.bringToFront().

My issue is that while it seems it accurately finds the amount of layers that matches the current province, the bringToFront() does not seem to work (see appended images below).

Expected

Actual

Find the code for the file appended below:

import { useState } from "react";
import { GeoJSON } from "react-leaflet";
import { useDispatch, useSelector } from "react-redux";
import { selectProvince } from "../../features/selectedProvinceSlice";

export const EuropeRegionsLayer = () => {

    const dispatch = useDispatch()

    const map = useSelector((state) => state.map.mapValues)

    const [currProvince, setCurrProvince] = useState(null)

    return (
        <GeoJSON data={map}
            onEachFeature={(feature, layer) => {
                if (layer.feature.properties.group_id == currProvince?.feature.properties.group_id) {
                    layer.bringToFront()
                }
                layer.on({
                    click: (e) => setCurrProvince((prevState) => {
                        if (prevState?.feature.properties.group_id !== e.target.feature.properties.group_id) {
                            setCurrProvince(e.target)
                            e.target.bringToFront()

                            dispatch(selectProvince(e.target.feature.properties))
                        }
                        return e.target
                    })
                })
            }}
            style={(feature) => {
                return {
                    color: feature.properties.group_id === currProvince?.feature.properties.group_id ? "white" : "rgba(25, 25, 25, 1.0)",
                    weight: 1.0,
                    fillColor: "transparent",
                }
            }}>
        </GeoJSON>)
}