react-native-svg: LinearGradient doesn't change between components when given different colors - react-native

Question

I have a component that generates a square linear gradient using react-native-svg. When I pass in different hue colors, it stays the same color.
Things I tried:
Passing in hex instead of hsl colors and the issue still arises
What am I missing?
Expo Snack: https://snack.expo.dev/#paulwongx/react-native-svg_color_stop_issue
Gradient.js
import * as React from 'react';
import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
export default function Gradient({hue}) {
return (
<Svg width={128} height={128} viewBox="0 0 24 24">
<Defs>
<LinearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<Stop offset="0" stopColor={`hsl(${hue}, 100%, 74%)`} />
<Stop offset="1" stopColor={`hsl(${hue}, 100%, 55%)`} />
</LinearGradient>
</Defs>
<Rect width="100%" height="100%" fill="url(#gradient)" />
</Svg>
);
}
App.js
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Gradient from './Gradient';
export default function App() {
return (
<View style={{flexDirection: "row", flexWrap: "wrap"}}>
<Gradient hue={20} />
<Gradient hue={50} />
<Gradient hue={100} />
<Gradient hue={150} />
<Gradient hue={200} />
<Gradient hue={250} />
<Gradient hue={300} />
<Gradient hue={350} />
</View>
);
}
Output:
Looking at the rendered code within Inspect Element, the components show different hues but they all render the same colors.
// first component
<stop offset="0" stop-color="hsl(20, 100%, 74%)"></stop>
<stop offset="1" stop-color="hsl(20, 100%, 55%)"></stop>
// last component
<stop offset="0" stop-color="hsl(350, 100%, 74%)"></stop>
<stop offset="1" stop-color="hsl(350, 100%, 55%)"></stop>

Answer 1

I think you have to give a unique id to the linear gradient. The problem is that the id is always the same.
import * as React from 'react';
import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
export default function Gradient({hue, id}) {
return (
<Svg width={128} height={128} viewBox="0 0 24 24">
<Defs>
<LinearGradient id={`gradient_${id}`} x1="0%" y1="0%" x2="100%" y2="100%">
<Stop offset="0" stopColor={`hsl(${hue}, 100%, 74%)`} />
<Stop offset="1" stopColor={`hsl(${hue}, 100%, 55%)`} />
</LinearGradient>
</Defs>
<Rect width="100%" height="100%" fill={`url(#gradient_${id})`} />
</Svg>
);
}
And then
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Gradient from './Gradient';
export default function App() {
return (
<View style={{flexDirection: "row", flexWrap: "wrap"}}>
<Gradient hue={20} id="first" />
<Gradient hue={50} id="second" />
</View>
);
}