React Stomp SockJsClient failed to connect and get a connection has not been established yet

Question

I'm using websocket with SockJsClient from react-stomp.

I implemented it as such:

        <SockJsClient
          autoReconnect={true}
          url={config.socket} // This is the url
          topics={targetTopics}
          onMessage={(msg, topic) => handleMessage(msg, topic)}
          onDisconnect={handleOnDisconnect}
          onConnectFailure={handleOnConnectFailure}
          getRetryInterval={customGetRetryInterval}
          heartbeat={25000}
          debug={true}
        />

So onDisconnect and onConnectFailure, I just decided to console.log(...) them, and all I got was an error saying Connection to broker closed (Both from the debug and from the console logs). This causes my app to crash with another error saying InvalidStateError: The connection has not been established yet.

I tried to handle this issue, by setting the topic on connect, something like:

const [topics, setTopics] = useState([]);

const targetTopics = [
    // array of strings to the topics I want to subscribe to here
]

const handleOnConnect = () => {
    setTopics(targetTopics);
}

<SockJsClient
    ...props
    topics={topics}
    onConnect={handleOnConnect}
/>