Why do we need extraData for re-render flatList?

I’m new to React native and I’m experimenting to understand some things. In the flatlist below, I am replacing the element at index 0 in the list variable with onPress. I learned that the extraData props are used to reflect the changes. However, in the example below, even if there is no extraData, the changes are reflected on the screen because the state has changed. So why do we need extraData then?

import React, { useState } from 'react'
import { FlatList, Text, TouchableOpacity, View } from 'react-native'

let data = [{ id: 1, word: "Strong" }, { id: 2, word: "Support" }, { id: 3, word: "Discovery" }]

export default function WordSelect() {

  const [list, setList] = useState(data)
  const [selectedId, setSelectedId] = useState(null)

  const onPress = () => {
    list[0] = { id: 4, word: "Together" }
  }

  return (
    <FlatList
      data={list}
      // extraData={selectedId}
      keyExtractor={(data) => data.id.toString()}
      renderItem={({ item }) => (
        <TouchableOpacity
          onPress={() => {
            onPress()
            setSelectedId(item.id)
          }}
        >
          <View style={{ paddingTop: 30, alignSelf: 'center' }}>
            <Text >{item.word}</Text>
          </View>
        </TouchableOpacity>
      )}
    />
  )
}