Same code renders in view-map but not in FlatList

Question

a React Native beginner here. While working on a tutorial app I was not able to get FlatList to show my data items. So I created a screen which would render data items from an array of objects (playing cards used here) in a FlatList and a View-Map combination. Now the list renders perfectly in the View-Map but does not render at all in the FlatList. No error or warning appears either. Can anyone please point out what might be the mistake here. I have been struggling to get it work for a couple of days now.

import { View, Text, FlatList, Button, SafeAreaView } from "react-native";
import { React, useState } from "react";
import {
  hearts,
  spades,
  clubs,
  diamonds,
  suites,
} from "../../assets/data/cards";

const FlatListVsMap = () => {
  const [cards, setCards] = useState(hearts);
  //console.log("Cards Initially: " + cards);
  const flatlist = false;
  return (
    <SafeAreaView>
     //Option 1: Using a Flatlist when 'flatlist' true
      {flatlist && cards && (
        <FlatList
          data={cards}
          extraData={cards}
          keyExtractor={(card) => card.id}
          renderItem={(card) => {
            <View className="h-10">
              <Text key="index">{`Card: ${card.name}, Id: ${card.id}`}</Text>
            </View>;
          }}
          ListHeaderComponent={
            <View className="flex-row justify-between px-2 mt-5 border">
              <Button title={"Hearts"} />
              <Button title={"Spades"} />
              <Button title={"Clubs"} />
              <Button title={"Diamonds"} />
            </View>
          }
        />
      )}
      //Option 2: Using a View-Map when 'flatlist' false
      {!flatlist && cards && (
        <View>
          <View className="flex-row justify-between px-2 mt-5 border">
            <Button title={"Hearts"} />
            <Button title={"Spades"} />
            <Button title={"Clubs"} />
            <Button title={"Diamonds"} />
          </View>
          <View className="mt-5 bg-slate-400">
            {cards.map((card, index) => (
              <View className="h-10" key={index}>
                <Text>{`Card: ${card.name}, Id: ${card.id}`}</Text>
              </View>
            ))}
          </View>
        </View>
      )}
    </SafeAreaView>
  );
};

export default FlatListVsMap;

Answer 1

Update Flatlist renderItem to this code

renderItem={({item:card}) => {
  return(
    <View className="h-10">
      <Text key="index">{`Card: ${card.name}, Id: ${card.id}`}</Text>
    </View>
  )
}