Error. React Native Expo. The program gives the error: “eferenceError: Property ‘list’ doesn’t exist, js engine: hermes”

The program gives the error: “eferenceError: Property ‘list’ doesn’t exist, js engine: hermes”. I believe this is due to incorrectly passing addItem or using useState. Tell me, how can I fix the code so that everything works?

App.js:

export default function App() {
  
  const [listOfItems, setListOfItems] = useState([
    {text:"TEST", fav: true, key: Math.random().toString(36).substring(7)},
    {text:"TEST2n1n2n3", fav: false, key: Math.random().toString(36).substring(7)} 
  ]);  // {text:"", fav:t|f, key: Math.random().toString(36).substring(7)} 

  const addItem = (data) => {
    setListOfItems((list) => [
      // { text: data.text, fav: data.fav, key: Math.random().toString(36).substring(7) },
      { text: data.text, fav: data.fav, key: Math.random().toString(36).substring(7) },
      ...list,
    ]);
  };

  const deleteItem = (key) => {
    setListOfItems((list) => list.filter(item => item.key !== key));
  };

  const changeItem = (key, data) => {
    setListOfItems((list) => {
      const itemIndex = list.findIndex(item => item.key === key);
      if (itemIndex !== -1) {
        const updatedList = [...list];
        updatedList[itemIndex] = { ...updatedList[itemIndex], ...data };
        return updatedList;
      }
      return list;
    });
  };

  const Tab = createBottomTabNavigator();
  return (
      <NavigationContainer>
          <Tab.Navigator>
            <Tab.Screen name="Favorites" component={Favorites} initialParams={{listOfItems}} />
            <Tab.Screen name="Home" component={MainList} initialParams={{listOfItems}}/>
            <Tab.Screen name="Create" component={Form} initialParams={{addItem}}/>
            <Tab.Screen name="Settings" component={Settings} />
        </Tab.Navigator>
      </NavigationContainer>
  );
};

FormCreate.js:

export default function Form({ route }) {
    const [data, setValue] = useState({ text: "", fav: false });
    const { addItem } = route.params;

    const onChangeText = (item) => {
        setValue(prevState => ({ ...prevState, text: item }));
    };

    const onChangeFavorite = () => {
        setValue(prevState => ({ ...prevState, fav: !prevState.fav }));
    };

    return (
        <View>
            <Pressable style={styles.but} onPress={onChangeFavorite}>
                <Text style={{ color: 'white' }}>Favorite</Text>
            </Pressable>
            <TextInput 
                style={styles.input} 
                onChangeText={onChangeText} 
                placeholder='Enter task content...' 
            />
            <Pressable onPress={() => addItem(data)} style={styles.but}>
                <Text style={{ fontWeight: 'bold', color: 'white', textAlign: 'center' }}>Add</Text>
            </Pressable>
        </View>
    );
}

This is the module where the addItem function is passed, everything goes well until the setListOfItems function is called in App.js