Style not getting overwritten in react-native using styled-components

I'm trying to override a button's properties in the calling component using styled-components but it's not working. Nothing gets overridden and the component looks as though it's not taking on the overridden properties.

I've got a button defined like so:

import React from 'react';import { TouchableHighlight, View, Text, StyleSheet } from 'react-native';type ButtonProps = {  text: string;};export const RegularButton = ({text}: (ButtonProps)) => {  var [ isPress, setIsPress ] = React.useState(false);  var touchProps = {    activeOpacity: 1,    underlayColor: '#111111',    style: isPress ? (styles.btnPress) : (styles.btnNormal),    onHideUnderlay: () => setIsPress(false),    onShowUnderlay: () => setIsPress(true),    onPress: () => console.log('HELLO'),  };  return (<TouchableHighlight  {...touchProps}><Text style={styles.textStyle}>{text}</Text></TouchableHighlight>  );}var styles = StyleSheet.create({  btnNormal: {    backgroundColor: '#333333',    borderColor: 'black',    borderWidth: 1,    borderRadius: 10,  },  btnPress: {    borderColor: 'black',    borderWidth: 1,    borderRadius: 10,  },  textStyle: {    color: '#a7a7a7',    margin: 'auto'  }});

And an App module that uses it and overrides the style using styled-components:

import React from 'react';import styled from "styled-components";import { RegularButton } from './components/core/RegularButton'const MainView = styled.div`  width: 100%;  height: 100%;  background-color: #1a1a1a;  flex: 1;  align-items: 'center';  justify-content: 'center';`;const LevelButton = styled(RegularButton)`  width: 100%;  height: 60px;  margin-left: 16px;  margin-right: 16px;`;export default function App() {  return (<MainView><LevelButton text={"hello"}/><LevelButton text={"hello"}/></MainView>  );

What am I doing wrong here? I cannot get the button to take the width / height, margin, etc. properties that I'm trying to override.