Radialgradiant in SVG not working in Edge

Question

I have made a map in svg-format where every province is a path. Every province (path) has te same fill-color. I have created a hover-effect where the province that is hovered receives a radialgradient. I have defined the gradient inside the svg-tags in my html:

<defs>
    <radialgradient id="HoverGradient">
        <stop  stop-color="var(--ivory)" offset="0%"/>
        <stop  stop-color="var(--province-fill)" offset="100%"/>
    </radialgradient>

    <filter id="shadow" x="0" y="0" width="200%" height="200%">
        <feDropShadow dx="5" dy="5" stdDeviation="10" flood-color="var(--text-color)" flood-opacity="1" />
    </filter>
</defs>

I am handling the hover in my css:

.province{
    fill: var(--province-fill); /* which is blue rgba(2, 20, 94, .9)*/
    stroke: white;
    stroke-width: 2px;
    cursor: pointer;
}
.province:hover{
    fill: url("#HoverGradient");
    filter: url("#shadow");
}

It is working fine in Chrome but not in Edge. In Edge the province completely disappears on hover.

Any help is very much appreciated.