Soket io и reactjs, событие не работает

Я пытаюсь работать с реакцией в качестве клиента и nodejs и soket io в качестве сервера.

В моем приложении для реагирования, когда пользователь отправляет форму, я хочу создать событие ввода-вывода сокета с данными формы, но, похоже, я не перехватываю событие на сервере.

Вот мой код, дело в том, что я не получаю никаких ошибок, я предполагаю, что что-то упустил, но не могу понять, что это такое.

App.js

Сначала я передаю свой объект ввода-вывода своим маршрутам, я не знаю, является ли это хорошей практикой, я просто хочу избежать переопределения соединения в каждом компоненте.

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Route/Home';
import Game from './Route/Game';
import io from 'socket.io-client';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      io: io('http://localhost:5000'),
    };
  }

  render() {
    return (
      <Router>
          <Switch>
              <Route exact path='/'>
                <Home io = {this.state.io} />
              </Route>
              <Route path='/game' component = {Game} io = {this.state.io}>
                <Game/>
              </Route>
          </Switch>
      </Router>
    );
  }
}

export default App;

Home.js

Здесь я запускаю событие SET_USERNAME с состоянием имени пользователя в качестве параметра.

import React, { Component } from 'react';
import '../css/color.css';
import '../css/home.css';

class Home extends Component {

  constructor(props){
    super(props);
    const { io } = props;
    this.state = {username: '', io : io};
  }

  handleChangeEvent = (e) => {
    this.setState({username : e.target.value});
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const { io } = this.state;
    io.emit('SET_USERNAME', this.state.username);
  }

  render() {
    return (
        <section className = "background">
          <div className = "form_layout">
            <form className = "form" onSubmit = {this.handleSubmit} >
              <div className = "form_label">
                <label htmlFor = "">What's your name ?</label>
              </div>
              <input value = {this.state.username} onChange = {this.handleChangeEvent} className = "form_input" type = "text"/>
              <input className = " form_input form_button" type = "submit" value = "Submit"/>
            </form>
          </div>
        </section>
    );
  }
}

export default Home;

Вот что получится, если я добавлю console.info(io) сразу после функции emit.

И сервер.js Я ожидаю, что состояние моего имени пользователя будет напечатано в моей консоли, но здесь ничего не произошло, похоже, что событие не вызывается.

var user = 0;

io.on('connection', (socket) => {
  user++;
  console.info(user);

  io.on('SET_USERNAME', (username) => {
    console.info(username);
  });

  socket.on('disconnect', () => {
    user--;  
    console.info(user);
  });

});

server.listen(5000, () => {
  console.info('listening on *:5000');
});

Спасибо за помощь !