Hi i’m trying to do something similar to what’s shown in this picture

but i can’t seem to get it to send to the user using renderMessage. it only shows up on my screen with the buttons

  const renderMessage = (props) => {
    const { currentMessage } = props; // Assuming handleButtonPress and styles are passed as props
    if (currentMessage.type === 'request') {
      return (
        <View style={styles.requestContainer}>
          <Text style={styles.requestText}>{currentMessage.text}</Text>
          <View style={styles.buttonContainer}>
            {currentMessage.buttons.map((button, index) => (
              <TouchableOpacity
                key={index}
                style={styles.requestButton}
                onPress={() => handleButtonPress(button.action, currentMessage)}
              >
                <Text style={styles.requestButtonText}>{button.text}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      );
    } else {
      // Render other types of messages using custom Bubble component
      return (
        <Bubble
          {...props}
          wrapperStyle={{
            right: {
              backgroundColor: COLORS.primary_400,
              marginBottom:5
            },
            left: {
              backgroundColor: COLORS.background_200,
              marginBottom:5
            },
          }}
          textStyle={{
            right: {
              ...FONTS.h4_reg, // Custom text style for outgoing messages
              color: COLORS.white, // Text color for outgoing messages
            },
            left: {
              ...FONTS.h4_reg, // Custom text style for incoming messages
              color: COLORS.white, // Text color for incoming messages
            },
          }}
        />
      );
    }
  };

tried using chatgpt to help and used the difficult to understand docs