I'm tryng to render a "SectionList" in "React-native", but isn't working

I'm new programing specially with React Native.I tryed to create a FlatList, it worked fine, but the data was not displayed as the away i wanted, cause i needed i header to organize the data as the away i wanted.I searched an i found the <SectionList> component. So i rewited the code to work, but when i put the the data, it shows me the due error:

(property) sections: readonly SectionListData<any, GamesInfoSection>[]An array of objects with data for each section.No overload matches this call.  Overload 1 of 2, '(props: SectionListProps<any, GamesInfoSection> | Readonly<SectionListProps<any, GamesInfoSection>>): SectionList<...>', gave the following error.    Type 'GamesInfoSection[] | undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.      Type 'undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.  Overload 2 of 2, '(props: SectionListProps<any, GamesInfoSection>, context: any): SectionList<any, GamesInfoSection>', gave the following error.    Type 'GamesInfoSection[] | undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.      Type 'undefined' is not assignable to type 'readonly SectionListData<any, GamesInfoSection>[]'.ts(2769)SectionList.d.ts(210, 3): The expected type comes from property 'sections' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, GamesInfoSection>> & Readonly<...>'SectionList.d.ts(210, 3): The expected type comes from property 'sections' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, GamesInfoSection>> & Readonly<...>'

the full component:

<SectionList            sections={games}            keyExtractor={(item, index) => item + index}            renderItem={({ item }) => (<View style={styles.game_section}><View style={styles.game_match}><View style={styles.game_time}><Text>{item.games?.time}</Text></View><View style={styles.breakLine}></View><View style={styles.game_team}><View style={styles.team}><View style={styles.team_brand}></View><Text style={styles.team_name}>{item.games?.home}</Text></View><View style={styles.team}><View style={styles.team_brand}> </View><Text style={styles.team_name}>{item.games?.away}</Text></View></View><View style={styles.breakLine}></View><View style={styles.score}><View style={styles.team}><Text style={styles.team_name}>{item.games?.homeScore}</Text></View><View style={styles.team}><Text style={styles.team_name}>{item.games?.homeScore}</Text></View></View></View></View>            )}            renderSectionHeader={({ section: { infoSection } }) => (<View style={styles.game_info}><Text style={styles.game_country}>{infoSection?.country}</Text><Text style={styles.game_league}>{infoSection?.league}</Text></View>            )}          />

the data const:

const [games, setGames] = useState<GamesInfoSection[]>();  useEffect(() => {    try {      const api = setupApiGames();      api?.get('/games').then(response => {        setGames(response.data);      }      )    } catch (error) {      console.log(error +'error ao acessar os Jogos');    }  }, [])

i tried to put the sugested solution by VScode:

  sections={games as any}            keyExtractor={(item, index) => item + index}            renderItem={({ item }) => (

But it doesn't work either , the error disappeared, but the app don't display nothing, just a white page, removing even the components outside of the "SectionList"