Cannot see FlatList inside Modal

Hi i've got a problem with seeing names added to list. Before using Modal everything works fine, but after I use it, after pressing "+" button, nothing happens. I mean I cannot see names in FlatList

///Main_file.tsximport { StatusBar } from 'expo-status-bar';import React, {useState} from 'react';import {   StyleSheet,   View,   Button,   FlatList} from 'react-native';import GoalItem from'./components/Goalitem';import GoalInput from './components/Goalinput';export default function App() {  const [courseGoals, setCourseGoals]  = useState<any>([]);  const [isAddMode, setIsAddMode] = useState(false);  function addGoalHandler(goalTitle: string):void  {    setCourseGoals([...courseGoals,{id: Math.random().toString(), value: goalTitle}]);  };  function removeGoalHandler(goalId:string):void  {    setCourseGoals((courseGoals: any[]) =>     {      return courseGoals.filter((goal:any) => goal.id !== goalId);    });  };  return (<View style = {styles.screen}><Button title="Turn on adding mode" onPress = {()=>setIsAddMode(true)}/><GoalInput  visible = {isAddMode} onAddGoal = {addGoalHandler} placeholder onChangeText style value/><FlatList         keyExtractor={(item, index) => item.id}        data ={courseGoals}         renderItem ={itemData => (<GoalItem           id = {itemData.item.id}           onDelete = {removeGoalHandler}           title = {itemData.item.value}           />        )}      /></View>   );}const styles = StyleSheet.create({  screen:{    padding:50,  }});

And the second file with goal input

import React, {useState} from 'react'import {View, TextInput, Button, StyleSheet, Modal} from 'react-native'type Props = {    value:any,    style: any,    onAddGoal: any,    placeholder: any,    onChangeText: any,    visible:boolean}const GoalInput = (props:Props) =>{    const [enteredGoal, setGoal] = useState<string>('');    const goalInputHandler = (enteredText:string) =>{        setGoal(enteredText);     };    return(<Modal visible={props.visible} animationType="slide"><View style = {styles.inputContainer}><TextInput                     placeholder="Dodaj przedmiot do listy zakupów"                     style={styles.input}                     onChangeText={goalInputHandler} //1.onChangeText pobiera wpisany text i wysyła do goalInputHandler                    value={enteredGoal}                /><Button title = '+' onPress = {props.onAddGoal.bind(this,enteredGoal)}/></View></Modal>    );};const styles = StyleSheet.create({    inputContainer:{        flexDirection: 'column',         justifyContent: 'flex-start',         alignItems: 'center'      },      input:{        width:'80%',         padding: 10,         borderColor: "black",         borderWidth: 1      }  });  export default GoalInput;

I'm doing everything like in course React Native - The Practical Guide by Maximilian Schwarzmüller but he's coding in js and i'm in ts.