Why are components not rendered in FlatList?

Question

React Native

I am writing a small weather application on React Native
. As an API, I chose openweathermap

A component that contains a FlatList and should render other components:

export const WeatherCards = (props: any) => {
    return (
        <View>
            <FlatList
                data={props.data}
                renderItem={({ item }) => (
                    <TouchableOpacity onPress={() => props.navigation.navigate('WeatherItem', item)}>
                        <WeatherCard city={item.name} temperature={item.main.temp} />
                    </TouchableOpacity>
                )}
                keyExtractor={item => item.id.toString()}
            />
        </View>
    )
};

The data that is stored in the props of the WeatherCards component:

Object {
  "data": Object {
    "base": "stations",
    "clouds": Object {
      "all": 86,
    },
    "cod": 200,
    "coord": Object {
      "lat": 49.4285,
      "lon": 32.0621,
    },
    "dt": 1640892582,
    "id": 710791,
    "main": Object {
      "feels_like": -11.87,
      "grnd_level": 1007,
      "humidity": 90,
      "pressure": 1021,
      "sea_level": 1021,
      "temp": -7.19,
      "temp_max": -7.19,
      "temp_min": -7.19,
    },
    "name": "Cherkasy",
    "sys": Object {
      "country": "UA",
      "sunrise": 1640843259,
      "sunset": 1640872835,
    },
    "timezone": 7200,
    "visibility": 10000,
    "weather": Array [
      Object {
        "description": "overcast clouds",
        "icon": "04n",
        "id": 804,
        "main": "Clouds",
      },
    ],
    "wind": Object {
      "deg": 225,
      "gust": 3.5,
      "speed": 2.77,
    },
  },
  "navigation": Object {
    "addListener": [Function addListener],
    "canGoBack": [Function canGoBack],
    "dispatch": [Function dispatch],
    "getParent": [Function getParent],
    "getState": [Function anonymous],
    "goBack": [Function anonymous],
    "isFocused": [Function isFocused],
    "navigate": [Function anonymous],
    "pop": [Function anonymous],
    "popToTop": [Function anonymous],
    "push": [Function anonymous],
    "removeListener": [Function removeListener],
    "replace": [Function anonymous],
    "reset": [Function anonymous],
    "setOptions": [Function setOptions],
    "setParams": [Function anonymous],
  },
}

Can you please tell me why FlatList doesn't render components?

Before that, I put this array in data and everything worked:

const [cities, setCities] = useState([
        { id: 1, city: 'Cherkassy', temperature: '-4', time: '12:22', typeOfWeather: 'Cloudy' },
        { id: 2, city: 'Kiev', temperature: '-3', time: '12:22', typeOfWeather: 'Cloudy' },
        { id: 3, city: 'Lviv', temperature: '-5', time: '12:22', typeOfWeather: 'Cloudy' },
    ]);

Answer 1

Check in the console if the props are exactly flowing as they should, maybe item.item is needed there