Как добавить несколько элементов в плоский список с помощью ввода текста?

Я пытаюсь добавить элементы в плоский список через текстовый ввод. на данный момент я могу добавить только один элемент, и когда я пытаюсь добавить второй, он просто обновляет первый элемент, хотя данные из текстового ввода должны отображаться ниже предыдущего текстового ввода. Я нашел несколько примеров подобной проблемы, и я знаю, что мне, вероятно, нужно что-то добавить в свой код, но я просто не могу понять, что. ниже мой код. Буду благодарен за любую помощь :)

function FlatlistComponent({ }) {

    const listItems = [];
    const [arrayHolder, setArrayHolder] = React.useState([]);
    const [textInputHolder, setTextInputHolder] = React.useState('');

    useEffect(() => {
        setArrayHolder(listItems)
      }, [])

    const joinData = () => {
        listItems.push({ name : textInputHolder });
        setArrayHolder(listItems);
    }

    const FlatListItemSeparator = () => {
        return (
            <View
                style={{
                height: 1,
                width: "95%",
                backgroundColor: '#00678A',
                alignSelf: 'center'
                }} />
        );
    }

    // Delete note
    deleteNote = id => () => {
      const filteredData = arrayHolder.filter(item => item.id !== id);
      setArrayHolder({ data: filteredData });
    }

    return (
        <View style={styles.MainContainer}>

          <FlatList
            data={arrayHolder}
            width='100%'
            extraData={arrayHolder}
            keyExtractor={(item) => item.id}
            ItemSeparatorComponent={FlatListItemSeparator}
            renderItem={({ item }) => <Text style={styles.item} onPress={deleteNote(item.id)}> {item.name} </Text>}
          />

          <TextInput
            placeholder='Kirjoita uusi'
            onChangeText={data => setTextInputHolder(data)}
            style={styles.textInputStyle}
            underlineColorAndroid='transparent'
            clearTextOnFocus={true}
            value={listItems}
          />

          <TouchableOpacity onPress={joinData} style={styles.button} >
            <Text style={styles.buttonText}> + </Text>
          </TouchableOpacity>

        </View>
    );
}