Twilio FlexWebchat 'sendMessage' is triggering the message twice

I am using Twilio Flex WebChat to send and receive messages. I have a requirement to modify a message before sending it. Hence I added a listener beforeSendMessage in componentDidMount() where I am collecting the body of the message, transforming it, and sending the message. Here the issue is that it's sending both the original message and transformed message. My target is to send the transformed message alone. Can you possibly help me. Thank you.

    componentDidMount() {
        FlexWebChat.Actions.addListener(
          'beforeSendMessage',
          async (payload) => {
            const { body, channelSid } = payload;
            const modifiedBody = transform(body)  //Transforming the message here
            await FlexWebChat.Actions.invokeAction('SendMessage', {
              body: modifiedBody,  // Sending the transformed message
              channelSid,
            })
          }
        )
     }

The reason this is happening is because you are doing a SendMessage Twice.

What you can do with the Listener is modify the payload and let the execution continue and it will continue to execute. If you want to block the message sending you can call abortFunction()

  componentDidMount() {
    FlexWebChat.Actions.addListener(
      'beforeSendMessage',
      async (payload, abortFunction) => {
        const { body, channelSid } = payload;
        payload.body = transform(body);  //Transforming the message here
      }
    )
 }