Getting 'Text strings must be rendered within a component' for custom component

I'm trying to create a custom component that labels an icon and then some text next to it, I have it set up as such:

import React from 'react';import { View, Image } from 'react-native';import { FontAwesome5 } from '@expo/vector-icons';import { Text } from 'galio-framework';import PropTypes from 'prop-types';export default class IconLabel extends React.Component<any, any> {    static propTypes = {        text: PropTypes.string,        icon: PropTypes.string,        iconSize: PropTypes.number,        iconColor: PropTypes.string,    };render() {        return (<View style={{ flex: 1, flexDirection: 'row' }}><FontAwesome5 name={this.props.icon} size={this.props.iconSize} color={this.props.iconColor} />;<Text p bold style={{ paddingLeft: 10, textAlignVertical: 'center' }}>                    {this.props.text}</Text></View>        );    }}

When I try to use it in my screen, I do it like this:

<IconLabel icon="ad" iconSize={20} iconColor="white" text="test text" />

However, it just gives me this error:

What's the process to fixing this?