Нежелательные дополнительные данные поступают с Socket.io и JQuery

Сценарий:

• Когда я распечатываю сообщение чата, оно добавляет еще одно сообщение к msg.
• Когда я консоль, регистрирую их, я получаю это. Почему хранится в состоянии дополнительная стоимость объекта?

Журнал консоли:

2{"message":"e"}
1{"message":"e"}
2{"message":"e"}
(2) 1{"message":"e"}
2{"message":"e"} 
(3)1{"message":"e"}

Фрагмент кода

import React, { Component } from "react";
import io from "socket.io-client";
import "../../../Chat.css";
import $ from "jquery";
var socket = io();
export default class ChatLayout extends Component {
      constructor() {
        super();
        this.state = {
          message: ""
        };
        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
      }

      componentDidMount() {}

      onSubmit(e) {
        e.preventDefault();
        socket.emit("chat message", this.state.message);
        socket.on("chat message", msg => {
          console.info("1" + JSON.stringify(this.state));
          $("#messages").append($("<li>").text(msg));
        });
        console.info("2" + JSON.stringify(this.state));
      }

      onChange(e) {
        this.setState({ [e.target.name]: e.target.value });
      }

      render() {
        return (
          <div className = "chat">
            <ul id = "messages">
              <div />
            </ul>
            <form action = "" onSubmit = {this.onSubmit}>
              <textarea
                name = "message"
                placeholder = "Enter your message here"
                autoComplete = "off"
                type = "submit"
                value = {this.state.message}
                onChange = {this.onChange}
              />
              <input type = "submit" className = "btn btn-info btn-block mt-4" />
            </form>
          </div>
        );
      }
    }