How to use the @cometchat-pro/chat.CometChat.addMessageListener function in @cometchat-pro/chat

componentDidMount() {
    //listener1
    var listenerID = LISTENER_NEW_MESSAGE;

    CometChat.addMessageListener(
      listenerID,
      new CometChat.MessageListener({
        onTextMessageReceived: textMessage => {
         
          let messageId;
          let senderID;
          if (
            textMessage.receiverType === CometChat.RECEIVER_TYPE.USER &&
            textMessage.sender.uid === this.props.activeConversation.uid
          ) {
            // Handle text message
            senderID = textMessage.sender.uid;
            messageId = textMessage.id;

            if (senderID !== this.props.subjectUID) {
              CometChat.markMessageAsRead(

componentWillMount() {
    this.fetchfirstTimeMessage(this.props.activeUser.type,this.props.activeUser.id);
    CometChat.addMessageListener(
      "CHAT_BOX_LISTENER",
      new CometChat.MessageListener({
        onTextMessageReceived: message => {
          this.markAsRead(message);
        },
        onMediaMessageReceived: message => {
          this.markAsRead(message);
        }
      })
    );
  }

new CometChat.MessageListener({
        onMessageEdited: message => {
          let msghistory = this.state.msghistory;
          let messageKey = _.findIndex(msghistory, function(m) {
            return m.id === message.id;
          });
          msghistory[messageKey] = message;
          this.setState({ msghistory });

          this.props.handleOnRecentMessageSent(message.id);
        }
      })
    );

    var listenerID5 = LISTENER_RT_MSG_DELETE;
    CometChat.addMessageListener(
      listenerID5,
      new CometChat.MessageListener({
        onMessageDeleted: message => {
          let msghistory = this.state.msghistory;
          const messageKey = _.findIndex(msghistory, function(m) {
            return m.id === message.id;
          });
          msghistory[messageKey] = message;
          this.setState({ msghistory });
          this.props.handleOnRecentMessageSent(message.id);
        }
      })
    );

  }

static addMessageListener(dispatch) {
    CometChat.addMessageListener(
      this.LISTENER_KEY_MESSAGE,
      new CometChat.MessageListener({
        onTextMessageReceived: message => {
          this.handleMessage(message, dispatch);
        },
        onMediaMessageReceived: message => {
          this.handleMessage(message, dispatch);
        },
        onMessagesDelivered: (messageReceipt) => {
          this.handleMessageDelivered(messageReceipt, dispatch);
        },
        onMessagesRead: (messageReceipt) => {
          this.handleMessageRead(messageReceipt, dispatch);
        },
        onTypingStarted: (typingIndicator) => {
          this.handleStartTyping(typingIndicator,dispatch);

"id",
            messageReceipt.messageId
          ]);
         
          if (index_in_history !== undefined) {
            msghistory[index_in_history]["deliveredAt"] =
              messageReceipt.deliveredAt;
            this.setState({ msghistory });
          }
        }
      })
    );

    var listenerID4 = LISTENER_RT_MSG_EDIT;

    CometChat.addMessageListener(
      listenerID4,
      new CometChat.MessageListener({
        onMessageEdited: message => {
          let msghistory = this.state.msghistory;
          let messageKey = _.findIndex(msghistory, function(m) {
            return m.id === message.id;
          });
          msghistory[messageKey] = message;
          this.setState({ msghistory });

          this.props.handleOnRecentMessageSent(message.id);
        }
      })
    );

    var listenerID5 = LISTENER_RT_MSG_DELETE;