React Native map axios instead of a imported file

I am studying React Native, and I forked this Github Repository and I have a feed.tsx that returns a FlatList and it renders a function that map the variable twitts. I want to try to use Axios instead of data imported file as the following code:

  feed.tsx  import React from 'react';  import {FlatList, View, StyleSheet} from 'react-native';  import {StackNavigationProp} from '@react-navigation/stack';  import {useTheme} from 'react-native-paper';  import axios from 'axios';  import {Twitt} from './components/twitt';  import {twitts} from './data';  import {StackNavigatorParamlist} from './types';  type TwittProps = React.ComponentProps<typeof Twitt>;  function renderItem({item}: { item: TwittProps }) {      return <Twitt {...item} />;  }  function keyExtractor(item: TwittProps) {      return item.id.toString();  }  type Props = {      navigation?: StackNavigationProp<StackNavigatorParamlist>;  };  export const Feed = (props: Props) => {      const theme = useTheme();      var response = axios.get('https://api.themoviedb.org/3/movie/popular?api_key=49f0f29739e21ecda580cd926a19075e&language=en-US&page=1');      const data = response.data.result.map(twittProps => ({          ...twittProps,          onPress: () =>              props.navigation &&              props.navigation.push('Details', {                  ...twittProps,              }),      }));      return (<FlatList              contentContainerStyle={{backgroundColor: theme.colors.background}}              style={{backgroundColor: theme.colors.background}}              data={data}              renderItem={renderItem}              keyExtractor={keyExtractor}              ItemSeparatorComponent={() => (<View style={{height: StyleSheet.hairlineWidth}}/>              )}          />      );  };

And the following twitt.tsx:

      import React from 'react';  import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';  import {      Surface,      Title,      Caption,      Text,      Avatar,      TouchableRipple,      useTheme,  } from 'react-native-paper';  import {MaterialCommunityIcons} from '@expo/vector-icons';  import color from 'color';  type Props = {      id: number;      adult: boolean,      popularity: number,      vote_count: number,      video: boolean,      poster_path: string,      backdrop_path: string,      original_language: string,      original_title: string,      genre_ids: any,      title: string,      vote_average: number,      overview: string,      release_date: string,      onPress: (id: number) => void;  };  export const Twitt = (props: Props) => {      const theme = useTheme();      const iconColor = color(theme.colors.text)          .alpha(0.54)          .rgb()          .string();      const contentColor = color(theme.colors.text)          .alpha(0.8)          .rgb()          .string();      const imageBorderColor = color(theme.colors.text)          .alpha(0.15)          .rgb()          .string();      return (<TouchableRipple onPress={() => props.onPress(props.id)}><Surface style={styles.container}><View style={styles.leftColumn}><Image style={styles.movieImg} source={{uri: "https://image.tmdb.org/t/p/w500/" +props.backdrop_path }}/></View><View style={styles.rightColumn}><View style={styles.topRow}><Title>{props.title}</Title><Caption style={[styles.handle, styles.dot]}>{'\u2B24'}</Caption></View><Text style={{color: contentColor}}>{props.overview}</Text><View style={styles.bottomRow}><View style={styles.iconContainer}><MaterialCommunityIcons                                  name="star-circle"                                  size={20}                                  color={iconColor}                              /><Caption style={styles.iconDescription}>                                  {props.vote_average}</Caption></View><View style={styles.iconContainer}><MaterialCommunityIcons                                  name="thumb-up-outline"                                  size={20}                                  color={iconColor}                              /><Caption style={styles.iconDescription}>                                  {props.popularity}</Caption></View><View style={styles.iconContainer}><MaterialCommunityIcons                                  name="calendar"                                  size={20}                                  color={iconColor}                              /><Caption style={styles.iconDescription}>{props.release_date}</Caption></View></View></View></Surface></TouchableRipple>      );  };  const styles = StyleSheet.create({      container: {          flexDirection: 'row',          paddingTop: 15,          paddingRight: 15,      },      leftColumn: {          width: 100,          alignItems: 'center',          padding: 10      },      rightColumn: {          flex: 1,      },      topRow: {          flexDirection: 'row',          alignItems: 'baseline',      },      handle: {          marginRight: 3,      },      dot: {          fontSize: 3,      },      image: {          borderWidth: StyleSheet.hairlineWidth,          marginTop: 10,          borderRadius: 20,          width: '100%',          height: 150,      },      bottomRow: {          paddingVertical: 10,          flexDirection: 'row',          alignItems: 'center',          justifyContent: 'space-between',      },      iconContainer: {          flexDirection: 'row',          alignItems: 'center',      },      iconDescription: {          marginLeft: 2,          lineHeight: 20,          fontSize: 15      },      movieImg: {          width: "100%",          height: 100,      }  });

But, when I map Axios response data it doesn't work: