Why is hitSlop not working in this nested TouchableOpacity component?

I have a nested TouchableOpacity component like so:

  <View style={styles.mainTextContainer}>
    <Text>
      {mainText}
      <TouchableOpacity
        hitSlop={{top: Gutter, left: Gutter, bottom: Gutter, right: Gutter}}
        style={styles.icon}
        onPress={onPress}>
        {mainTextIcon}
      </TouchableOpacity>
    </Text>
  </View>

  // These are the corresponding styles
  icon: {
    justifyContent: "center",
  },
  mainTextContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "flex-start",
  },

However, it seems that the hitSlop prop is not working. Is it because it's nested inside of a Text component??