Why linear gradient is not working with svg sprite in React JS?

I'm using an SVG sprite in my react component. All SVGs without gradient work fine. But the one with the linear gradient does not apply the defined gradient. I've tried all possible modifications, but it still does not apply gradient at all.

SVG file:

  <svg
    style="position: absolute; width: 0; height: 0; overflow: hidden;"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
  >
    <defs>
      <symbol id="icon-item1" viewBox="0 0 452 520">
        <title>item1 Logo Badge</title>
        <path d="M 41,460 L 0,0 451,0 410,460 225,512" fill="RGB(227,79,38)" />
        <path d="M 226,472 L 375,431 410,37 226,37" fill="RGB(239,101,42)" />
        <path
          d="M 226,208 L 151,208 146,150 226,150 226,94 84,94 99,265 226,265 z M 226,355 L162,338 158,293 102,293 109,382 226,414 z"
          fill="RGB(236,237,238)"
        />
        <path
          d="M 226,265 L 295,265 288,338 226,355 226,414 341,382 357,208 226,208 z M 226,94 L226,150 362,150 367,94 z"
          fill="RGB(255,255,255)"
        />
      </symbol>
      <symbol id="icon-item2" viewBox="2.59 0 214.09101008 224">
        <title>item2 Logo Badge</title>
        <linearGradient
          id="icon-item2-a"
          gradientTransform="matrix(1 0 0 -1 0 264)"
          gradientUnits="userSpaceOnUse"
          x1="102.4"
          x2="56.15"
          y1="218.63"
          y2="172.39"
        >
          <stop offset="18%" stopColor="#0052cc" />
          <stop offset="100%" stopColor="#2684ff" />
        </linearGradient>
        <linearGradient
          id="icon-item2-b"
          x1="114.65"
          x2="160.81"
          xlinkHref="#icon-item2-a"
          y1="85.77"
          y2="131.92"
        />
        <path
          d="m214.06 105.73-96.39-96.39-9.34-9.34-72.56 72.56-33.18 33.17a8.89 8.89 0 0 0 0 12.54l66.29 66.29 39.45 39.44 72.55-72.56 1.13-1.12 32.05-32a8.87 8.87 0 0 0 0-12.59zm-105.73 39.39-33.12-33.12 33.12-33.12 33.11 33.12z"
          fill="#2684ff"
        />
        <path
          d="m108.33 78.88a55.75 55.75 0 0 1 -.24-78.61l-72.47 72.44 39.44 39.44z"
          fill="url(#icon-item2-a)"
        />
        <path
          d="m141.53 111.91-33.2 33.21a55.77 55.77 0 0 1 0 78.86l72.67-72.63z"
          fill="url(#icon-item2-b)"
        />
      </symbol>
    </defs>
  </svg>

React JS:

<svg className="content__logo">
   <use href={`${sprite}#icon-item2`} />
</svg>