Tailwind color rendering issue when hiding desktop/mobile component

Question

I'm currently working on a card component using Tailwind CSS (and Next JS) for both desktop and mobile views. To handle the responsive design, I'm hiding the desktop version on mobile and vice versa using Tailwind's classes (hidden).

However, I'm encountering an issue where the colors are not being displayed correctly for an SVG inside the card component. Specifically, the correct color is only shown on the card that is being rendered first (mobile), on desktop color is not being displayed on screen.

const Card = ({ card }: IProps) => {
  return (
    <>
      <CardMobile card={card} />
      <CardDesktop card={card} />
    </>
  );
};

const CardDesktop = ({ card }: IProps) => {
  return (
    <li className="hidden sm:block">
      <PolygonIcon />
    </li>
  );
};

const CardMobile = ({ card }: IProps) => {
  return (
    <li className="sm:hidden flex flex-col gap-4">
      <PolygonIcon />
    </li>
  );
};

SVG has some linear gradient inside, so I'm guessing thats the problem:

<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0712 18.8489C14.9804 18.8489 18.96 14.8693 18.96 9.96006C18.96 5.05086 14.9804 1.07117 10.0712 1.07117C5.16198 1.07117 1.18229 5.05086 1.18229 9.96006C1.18229 14.8693 5.16198 18.8489 10.0712 18.8489Z" fill="url(#paint0_linear_5_1947)"/>
<path d="M12.6362 11.8822L15.1511 10.4301C15.2843 10.3532 15.3667 10.2102 15.3667 10.0563V7.15235C15.3667 6.99882 15.2839 6.85546 15.1511 6.77851L12.6362 5.32637C12.503 5.24943 12.3379 5.24979 12.2047 5.32637L9.68984 6.77851C9.55664 6.85546 9.47425 6.99882 9.47425 7.15235V12.3421L7.71071 13.3602L5.94716 12.3421V10.3056L7.71071 9.28755L8.87394 9.959V8.59288L7.92629 8.04592C7.86096 8.00817 7.7862 7.98821 7.71034 7.98821C7.63449 7.98821 7.55972 8.00817 7.49475 8.04592L4.97991 9.49806C4.84671 9.57501 4.76432 9.71801 4.76432 9.8719V12.7758C4.76432 12.9293 4.84707 13.0727 4.97991 13.1497L7.49475 14.6018C7.62759 14.6784 7.79309 14.6784 7.92629 14.6018L10.4411 13.15C10.5743 13.0731 10.6567 12.9297 10.6567 12.7762V7.58643L10.6887 7.56828L12.4203 6.56837L14.1838 7.58643V9.62292L12.4203 10.641L11.2589 9.97025V11.3364L12.2047 11.8826C12.3379 11.9592 12.503 11.9592 12.6362 11.8826V11.8822Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_5_1947" x1="-2.06658" y1="2.53231" x2="16.2861" y2="13.7633" gradientUnits="userSpaceOnUse">
<stop stop-color="#A229C5"/>
<stop offset="1" stop-color="#7B3FE4"/>
</linearGradient>
</defs>
</svg>

Does anyone know the solution to this problem and the reason why this is happening?