SVG icons all in one color instead of different colors

Question

I've got a problem with my SVG icons. I pass different gradient colors through props but all of the icons get the color from the first icon on the page.

Here is my code:

<div>
 <div>
     <HexagonFilledWithGradient startColor="#fff" endColor="#000" />
 </div>
 <div>
    <HexagonFilledWithGradient startColor="red" endColor="blue" />
  </div>
</div>

const HexagonFilledWithGradient = (props: { startColor: string; endColor: string }) => {
  return (
    <svg
      width="100%"
      height="100%"
      stroke="transparent"
      viewBox="0 0 41.024 45.031"
      preserveAspectRatio="none"
    >
      <defs>
        <linearGradient id="h_grad" x1="0" y1="0" x2="0" y2="100%">
          <stop offset="0" stopColor={props.startColor} />
          <stop offset="1" stopColor={props.endColor} />
        </linearGradient>
      </defs>
      <path
        d="M.524 22.41c.117-2.493.058-4.927.35-7.42A9.413 9.413 0 0 1 5.48 7.86c3.207-2.029 6.531-3.884 9.8-5.8a10.059 10.059 0 0 1 10.844.061A687.99 687.99 0 0 0 34.87 7.28c3.44 2.029 5.481 4.985 5.6 8.985.117 4.464.058 8.985-.175 13.449a8.691 8.691 0 0 1-4.023 6.84 201.706 201.706 0 0 1-11.317 6.783 8.919 8.919 0 0 1-8.921-.058c-3.557-1.971-7-4.058-10.437-6.2a10.4 10.4 0 0 1-4.956-9.046c-.058-1.855 0-3.71 0-5.623z"
        fill="url(#h_grad)"
      />
    </svg>
  )
}

I wonder why is this happening and how do I go about fixing it? Thank you!