SockJS Client in React doesn't subscribe to the 'initial/queue' and one other topic

[marinavelvet]

Hi, I can't get SockJS Client to subscribe to the 'initial/queue' and 'dashboard/livestream' topic. I only get 'topic/livestream', no matter what I do.
Here is my code snippet, and also a reminder that in the backend everything is configured fine, so the problem is somewhere either in this logic or in SockJs library. Please help!

import React from 'react';
import SockJsClient from 'react-stomp';

class TableDataStream extends React.Component {
constructor(props) {
super(props);
this.state = {
clientConnected: false,
messages: [],
data: [],
circulatingSupply: '',
figures: '',
initialDataReceived: false
};
}

componentDidMount() {
this.setState({ clientConnected: true });
}

componentWillUnmount() {
this.setState({ clientConnected: false });
}

sendMessage = () => {
if (this.clientRef && this.clientRef.state && this.clientRef.state.connected) {
console.log(this.clientRef);
console.log(this.clientRef.state);
console.log(this.clientRef.state.connected);
this.clientRef.sendMessage('/dashboard/livestream', {});
}
};

handleMessage = (event) => {
if (event.topic === '/queue/initial') {

  this.setState({ initialDataReceived: true }); 
}
this.props.handleEvents(event);

};

handleDisconnect = () => {
console.log('SockJSClient is disconnected');
};

render() {
const { initialDataReceived, clientConnected } = this.state;

return (
  <div>
    {clientConnected && (
      <SockJsClient
        url={window.ENVIRONMENT.REACT_APP_BACKEND_SERVICE_LOCATION + '/register'}
        topics={['/queue/initial', '/topic/livestream']}
        onMessage={(msg) => {
          this.handleMessage(msg);
        }}
        ref={(client) => {
          this.clientRef = client;
        }}
        onConnect={() => {
          this.sendMessage();
        }}
        onDisconnect={this.handleDisconnect}
        debug={true}
      />
    )}
  </div>
);

}
}

export default TableDataStream;