View background won't change after clicking it and using ternary - reactjs

Question

So I am displaying 5 stars. They are all gray on default when they are not selected. When I click on the star, I want the background color to change of the View but it is not changing after clicking it. Also, if I click star 3, I want the stars before star 3 to also change the background color. But nothing is working.
I used console.log to view the changed list when handleStarClicked runs and it saves the changes but not sure what is going on. Would really appreciate some help, please
const stars = [{ id: 0, selected: false }, { id: 1, selected: false }, { id: 2, selected: false }, { id: 3, selected: false }, { id: 4, selected: false }];
const [holdStars, setHoldStars] = useState(stars);
const handleStarClicked = (id) => {
for (let i = 0 ; i < holdStars.length; i++) {
if (i <= id) {
holdStars[i].selected = true;
} else {
holdStars[i].selected = false;
}
}
setHoldStars(holdStars);
}
return (
<FlatList
data={holdStars}
horizontal
scrollEnabled={false}
renderItem={({ item }) =>
<Pressable onPress={() => handleStarClicked(item.id)} className="ml-1 p-1 rounded-xl items-center justify-center" style={{ backgroundColor: item.selected ? "#6ECCAF" : "#CCCCCC" }}>
<Icon name="star" type="AntDesign" size={32} color="white" />
</Pressable>
}
/>
)

Answer 1

The issue here is that you are modifying the holdStars array directly in the handleStarClicked function and that is causing the issue.
Try this :
const handleStarClicked = (id) => {
const newHoldStars = [...holdStars]; // create a new copy of the holdStars array
for (let i = 0 ; i < newHoldStars.length; i++) {
if (i <= id) {
newHoldStars[i].selected = true;
} else {
newHoldStars[i].selected = false;
}
}
setHoldStars(newHoldStars);
}