Каждому элементу SVG необходимо присваивать уникальный
id на каждый градиент, моя ошибка была в том, что у меня, в каждом элементе был один и тот же
id:
Не рабочий код:
<path
fill="url(#paint0_linear_424_1291)"
/>
<linearGradient
id="paint0_linear_424_1291"
>
Код решения:
<path
fill={`url(#paint0_linear_424_1291${colorStart}${colorEnd})`}
/>
<linearGradient
id={`paint0_linear_424_1291${colorStart}${colorEnd}`}
>
Суть решения: в каждой итерации .map() при отрисовке SVG где есть ссылка на элемент внутри, этим ссылкам нужно присваивать уникальные id