Некорректно отрабатывает SignalR в React приложении

Суть проблемы. Есть проект, написанный на React, в котором реализован блок Сообщения. Для обмена сообщениями была выбрана библиотека SignalR. Проблема следующая - в коде я прописал, что при успешной авторизации пользователя, происходит подключение к хабу и прослушка некоторых событий типа отправки/приема сообщений и обновления списка диалогов, после авторизации в консоли бывает написано, что соединение установлено, однако пока я вручную не перезагружу страницу хотя бы один раз страницу проекта ни один из методов не срабатывает. Я новичок в обращении с SignalR и еще многое не совсем правильно понимаю, поэтому прошу подсказать и объяснить что не так, я уже как мог вертел код, но безрезультатно. Изначально моя идея такая - когда пользователь авторизовывается, то происходит подключение к хабу и назначаются connection.on на некоторые события, то есть находясь после входа в систему, скажем на главной странице и если нам написали сообщение, то должен сработать метод Count, который отображает количество непрочитанных сообщений, или если мы на странице диалога, то при отправке нам сообщения у нас это самое сообщение должно отобразиться, и то же самое если мы сами отправляем его. Также отмечу что после перезагрузки страницы все начинает более менее работать, сообщения отправляются/принимаются и тд. Примеры кода ниже. Файл main.js, который открывается после успешной авторизации пользователя.

 class Main extends Component {
  constructor(props) {
    super(props);
    const { profileActions, auth } = props;
    let accessToken = Cookies.get('access_token');
    if (accessToken) {
      profileActions.AuthInit();
      this.connection = new HubConnectionBuilder()
        .withUrl('http://test.com/hub', { accessTokenFactory: () => Cookies.get('access_token') })
        .configureLogging(LogLevel.Information)
        .build();
    } else {
      this.props.history.push('/auth');
    }
  }


componentDidMount() {
    const accessToken = Cookies.get('access_token');
    if (accessToken) {
      this.connection.on('MessageCount', () => someActions() );
      this.connection.on('Dialog', () => someActions() );
      this.connection.on('Send', () => someActions() );    
      this.connection
        .start()
        .then(() => console.log(this.connection.state))
        .catch(err => console.log(err));
    }
  }
render() {
    return (
      <>
        <Switch>
           ...someRoutes
        </Switch>
      </>
    );
  }
}
function mapStateToProps(state) {
  return {
    auth: state.auth,
    messages: state.messages
  };
}

function mapDispatchToProps(dispatch) {
  return {
    profileActions: bindActionCreators(profileActions, dispatch),
    messagesActions: bindActionCreators(messagesActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Main);