SVG image not getting updating on E11

Question

I have an accordion opens and close on click of down/up caret button. Works fine on all browsers except E11.

Through JS I am updating SVG's xlink:href attribute on click of caret like

<svg xmlns="http://www.w3.org/2000/svg" class="accordion__trigger" viewBox="0 0 18 18"><path fill="currentColor" d="M 16.146 4.646 a 0.5 0.5 0 0 1 0.708 0.708 l -7.5 7.5 a 0.5 0.5 0 0 1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/sprite.svg#caret-up-1-18" /></svg>

<svg xmlns="http://www.w3.org/2000/svg" class="accordion_trigger" viewBox="0 0 18 18"><path fill="currentColor" d="M 16.146 4.646 a 0.5 0.5 0 0 1 0.708 0.708 l -7.5 7.5 a 0.5 0.5 0 0 1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/sprite.svg#caret-down-1-18" /></svg>

Inspecting DOM only href updated but not image in E11.

Is it because of sprite image with hash tagging not rendering in E11 ?

Not sure or its just a E11 itself or need to change toggle method for E11 only !!

Edited --

We replace SVG with Elm as

arrowUp : List (Svg.Attribute a) -> Html a
arrowUp =
    icon "arrow-up-18"

arrowDown : List (Svg.Attribute a) -> Html a
arrowDown =
    icon "arrow-Down-18"

up : Html a
Up =
    Icon.arrowUp iconAttributes

down : Html a
down =
    Icon.arrowDown iconAttributes

triggerToggle : Tag -> a -> Header -> Html a -> Html a
triggerToggle tag msg header icon =
    case header of
        Simple title ->
            trigger tag msg title [ icon ]

trigger tag msg title triggerChildren =
    div [ Tags.taggedWith tag, class "accordion__trigger", onClick msg ]

open tag msg title children =
    div [ class ("accordion accordion--open" ++ " " ++ mkClass title) ]
        [ triggerToggle tag msg title up ]

SVG sprite loads with page load and there is no console error .