Stomp js responsing twice

Question

I have developed a chat application using spring boot web socket. In the front end I am using react. And I have installed these packages

"sockjs-client": "^1.6.1",
"stompjs": "^2.3.3",

I send a message to one user and store that response in a Map. But when receiving a message from other user I is duplicating the response. But in database it stored only one message correctly. This is my code.

const userId = localStorage.getItem("loggedUserId")
    const [connected, setConnected] = useState(false)
    const [senderMessages, setSenderMessages] = useState(new Map())
    const [message, setMessage] = useState('')
    const chatReceiverId = useSelector(SelectChatReceiverId)

    console.log(senderMessages)
    const sendMessage = () => {
        if (stompClient) {
            const chatMessage = {
                message,
                senderId: userId,
                receiverId: chatReceiverId
            };
            if (senderMessages.get("chatId"+chatReceiverId)) {
                senderMessages.get("chatId"+chatReceiverId).push(chatMessage)
                setSenderMessages(new Map(senderMessages))
            } else {
                const list = []
                list.push(chatMessage)
                senderMessages.set("chatId"+chatReceiverId, list)
                setSenderMessages(new Map(senderMessages))
            }
            stompClient.send("/app/message", {}, JSON.stringify(chatMessage));
        }
    }

    useMemo(() => {
        if (stompClient !== null && connected) {
            stompClient.subscribe('/user/' + userId + '/private', (payload) => {
                const payloadData = JSON.parse(payload.body)
                const senderIdOfReceivedMsg = parseInt(payloadData.senderId)
                if (senderMessages.get("chatId"+senderIdOfReceivedMsg)) {
                    senderMessages.get("chatId"+senderIdOfReceivedMsg).push(payloadData)
                    setSenderMessages(new Map(senderMessages))
                } else {
                    const list = []
                    list.push(payloadData)
                    senderMessages.set("chatId"+senderIdOfReceivedMsg, list)
                    setSenderMessages(new Map(senderMessages))
                }
            });
        } else {
            const Sock = new SockJS('http://localhost:8080/ws');
            stompClient = Stomp.over(Sock)
            stompClient.connect({}, () => {
                setConnected(true)
            }, () => {
                console.log("Server Error")
            });
        }
    }, [connected])

For an example if I send a Hi message to user B from user A in user A chat box two Hi messages are displayed. And it is same for when sending a message from user B to user A