React-Native : useState to update object inside array - react-native

Question

I have a list of items, when one is clicked, it navigates to a modal which displays a list of options.
I am trying to increment the counter inside each option, it works as intended BUT when I exit the modal screen and go back to it, the options counter are not reseted.
const myOptions = [
{ id: '001', name: 'option 001', counter: 0 },
{ id: '002', name: 'option 002', counter: 0 },
];
function ModalScreen({ route, navigation }) {
const [options, setOptions] = useState(myOptions);
let tempArr = [...myOptions];
// Array where I increment the counter, before passing it to setOptions(tempArr)
useEffect(() => {
return () => {
// because of let tempArr = [...myOptions]; changes in tempArr are copied
in myOptions. I want to reset myOptions when I exit the component
console.log(options);
console.log(myOptions) // both output are identical
};
}, []);
return (
<View>
<Text style={{ fontWeight: 'bold', marginBottom: 15 }}>
Click on an option to increment counter by 1
</Text>
<FlatList
keyExtractor={item => item.name}
extraData={tempArr}
data={options}
renderItem={({ item, index }) => (
<TouchableOpacity
onPress={() => {
tempArr[index].counter++;
setOptions(tempArr);
}}>
<Text>
{item.name} - counter: {item.counter}
</Text>
</TouchableOpacity>
)}
/>
</View>
);
}
I did a demo here :
https://snack.expo.io/#oliviermtl/carefree-marshmallows
I spent my day trying to figure out this one... Let me know if something needs more explanation
Thanks

Answer 1

Change
useEffect(() => {
return () => {
console.log(options);
console.log(myOptions)
};
}, []);
to
useEffect(() => {
return () => {
myOptions[0].quantity = 0;
myOptions[1].quantity = 0;
};
},[]);
What I was doing is that changing quantity values to 0, whenever user closes or comes back out from modal.
Hope this helps!