React Stomp Client, received message before the event of Websocket

Question

I am implementing a Web-socket into my React App. It connects with the socket of the server, subscribes the channel too, but the message also receives together. The message should be deliver after the socket receives message from the server.

useEffect(() => {
        const url = 'https://webservice.example.com/socket'
        const socket = new SockJS(url)
        console.log(socket)
        const stompClient = new Client({
            webSocketFactory: () => socket,
            debug: function (str) {
              console.log('STOMP: ' + str);
            },
            reconnectDelay: 5000,
            heartbeatIncoming: 4000,
            heartbeatOutgoing: 4000,
        })
        const onConnect = () => {
            console.log("Connect to WebSocket")
            setIsConnected(true)
            const subscription = stompClient.subscribe(`/queue/scan/${fortyLengthString}`, (message) => {
                const messageData = JSON.parse(message.body)
                console.log('Received message: ', messageData)
                subscription.unsubscribe()
                stompClient.deactivate()
            })
            stompClient.publish({
                destination: '/app/scan-authcode',
                headers: {},
                body: JSON.stringify({ challenge_verifier: fortyLengthString })
            })

        }
        stompClient.onConnect = onConnect
        stompClient.activate()
        
        return () => {
            stompClient.deactivate()
        }
    }, [])

Screenshot of Network Panel

Screenshot of Console.

I spend a whole week, tried to fix, but I don't know what I am missing in here. Can somebody help me.