Image elements inside an svg element don’t render on other browsers than firefox

I’m losing my mind over this a bit. Why does this render on firefox, but on other browsers such as chrome and edge it doesn’t?

<div className="row" style={{ position: "relative", display: "flex" }}>
      <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 100 20"
          preserveAspectRatio="none"
          style={{ position: "relative", zIndex: "2" }}
        >
          <image
            href="link/border-top.svg"
            width="100%"
            height="auto"
          />
          <image
            href="link/linear-element-1.svg"
            width="100%"
            height="auto"
            y="-12"
          />
        </svg>
</div>

And here is how one of the svg files looks like:

<svg width="1996" height="161" viewBox="0 0 1996 161" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1807.17 102.812C1929 104.058 1983.51 29.3382 1995.53 8.7169e-05L0.0853286 0L0 73.5005C156 -16.4995 376.036 -23.7386 461 57.282C545.964 138.303 728.558 170.689 901 158.282C1099.5 144 1179.39 52.2167 1402.48 37.0962C1625.58 21.9758 1654.89 101.255 1807.17 102.812Z" fill="black"/>
</svg>

Is there a way to make it work while keeping the format? The idea was to have two svgs stacked together kind of and this is how I achieved it, but turns out it’s not rendered. Help appreciated!