React Native stylesheet Not working as expected

here is the code snippet

import { SafeAreaView, StyleSheet, Text, View } from 'react-native'
import React from 'react'

export default function Flatcards() {
  return (
    <SafeAreaView>
    <View>
      <Text style={styles.headingText}>Flatcards</Text>
        <View style= {styles.container}>
            <View style = {[styles.card, styles.redCard]}>
                <Text>RED</Text>
            </View>
        </View>
    </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
    headingText : {
        fontSize: 20,
        fontWeight:'bold',
    },
    container:{
  
    },
    card: {
        height: 100,
        width: 100
    },
    redCard:{
        backgroundColor: 'EF5354',
    }
}
)

Somehow, in the output, the headingText is working as expected, but the styles.card, and styles.redCard, does not work. and it only prints plain "RED". What could be wrong here?