TypeScript Error 7053 - Creating a custom React component that overrides styles with a prop, how do I properly tell TS what the type is?

Here is the code for my custom component. Getting an error that it doesn't like that I gave 'type' the type of string. What is the proper way to define what 'type' is? I'm assuming I would need to define some type of object for it but not sure how to go about doing that.

import React from 'react';import { StyleSheet, Text, Pressable } from 'react-native';interface Props {  text: string;  type?: string;  onPress: () => void;}const CustomButton: React.FC<Props> = ({ onPress, text, type = 'PRIMARY' }) => {  return (<Pressable      onPress={onPress}      style={[styles.container, styles[`container_${type}`]]}><Text style={[styles.text, styles[`text_${type}`]]}>{text}</Text></Pressable>  );};export default CustomButton;const styles = StyleSheet.create({  container: {    width: '100%',    padding: 15,    marginVertical: 5,    alignItems: 'center',    borderRadius: 5,  },  container_PRIMARY: {    backgroundColor: '#3B71F3',  },  container_TERTIARY: {},  text: {    fontWeight: 'bold',    color: 'white',  },  text_TERTIARY: {    fontWeight: 'normal',    color: 'gray',  },});