I tried to make a badge icon with red text, but all the styles I applied to the Text didn't work at all

IconWithBade.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import MatComIcon from 'react-native-vector-icons/MaterialCommunityIcons';
export const IconWithBadge = props => {
  const {text, iconName} = props;
  return (
    <View>
      <MatComIcon name={iconName ?? 'cart-variant'} size={22} color="grey" />
      {text && (
        <View style={styles.badgeStyle}>
          <Text styles={styles.BadgeTxt}>12</Text>
        </View>
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  badgeStyle: {
    position: 'absolute',
    right: -5,
    top: -5,
  },
  BadgeTxt: {color: 'red', fontWeight: 'bold'},
});

This my Header.js

everything on text style is not working