Changing PredefinedChatMessageBody based on preengagement data in Twilio Flex

Recently I am trying to use Twilio Flex Web Chat in my project and I am using a pre-engagement form for collecting user names. In the pre-engagement form based on the data collected I want to show a welcome message.I have tried this code but seems it is not working and in Twilio documentation, I can't find how to do it. Below is my code .

Twilio.FlexWebChat.createWebChat(appConfig).then(webchat => {
        const { manager } = webchat;
        debugger;
    //Posting question from preengagement form as users first chat message
        Twilio.FlexWebChat.Actions.on("afterStartEngagement", (payload) => {
            const { question, friendlyName } = payload.formData;
            manager.strings.PredefinedChatMessageBody  = `Hi !! ${friendlyName} How we can help you?`;
            if (!question)
                return;

            const { channelSid } = manager.store.getState().flex.session;
            manager
                .chatClient.getChannelBySid(channelSid)
                .then(channel => channel.sendMessage(question));
        });
    // Changing the Welcome message
        manager.strings.WelcomeMessage = "Welcome to AppsEconnect";
        manager.strings.PredefinedChatMessageAuthorName = "Appseconnect Team";
        manager.strings.PredefinedChatMessageBody  = "{{friendlyName}} how we can help you ?";

    // Render WebChat
        webchat.init();
    });