re-render flatlist when data changes in react-native - react-native

Question

I have a flatlist in a react-native app. This flatlist is filled with an array (renderItem). This works.
When I click on an item in the flatlist, the item should dissapear.
const [currentValues, setCurrentValues] = useState([])
// a fetch fills the currentValues-array with data from a
// database here, this works
<FlatList
data={currentValues}
renderItem={(item, index) => {
return (
<TouchableOpacity onPress={() => deleteItem(item.id)} style={{ borderWidth: 1, borderColor: 'black' }}>
<Text>{item.username}</Text>
</TouchableOpacity>
)
}} />
With the following function, I delete the item from the array:
const deleteItem = id => {
let array = currentValues
let index = array.findIndex(e => e.id === id)
array.splice(index, 1)
setCurrentValues(array)
}
The following problem occurs:
The deletion of the item in the array works, because when I do a console.log, I see the array is empty. The FlatList however does not re-render. When I click on an item to delete it, the username disappears (because it's deleted from the currentValues-item), but the item itself is not deleted, I still see a bordered rectangle.
When I just reset the array after I click one item, it works, so then the FlatList is re-rendered like it should. But then, all items are deleted at once (because I clear the array), and that's not what I want.
I tried the extraData prop. I added this to my flatlist:
extraData={currentValues}
I want to make sure the FlatList re-renders when the currentValues-array is updated, but this also does not work.
Does anyone knows how to solve this?
BTW, changing from FlatList to ScrollView works (with the exact same functions). So I think it's a FlatList issue.
Solution
The solution (based on MBach's answer):
const deleteItem = id => {
let array = [...currentValues]
let index = array.findIndex(e => e.id === id)
array.splice(index, 1)
setCurrentValues([...array])
}

Answer 1

Try to force clone your array with spread operator:
let array = [...currentValues]
Or you can connect currentValues to useEffect()