How to handle updates through websocket?

import { useMutation, useQueryClient } from "@tanstack/react-query";

function useAddIncomingMessage() {
    
    const queryClient = useQueryClient();

    return useMutation(({ selectedChat, msg }) => {
        queryClient.setQueryData(
            { queryKey: ["chatMessages", selectedChat] },
            (cache) => {
                const cacheCopy = { ...cache };
                cacheCopy.pages[0].results = [
                    msg,
                    ...cacheCopy.pages[0].results,
                ];
                return cacheCopy;
            }
        );
    });
}

export default useAddIncomingMessage;

    const { mutate } = useAddIncomingMessage();

    useEffect(() => {
        const callback = (msg) => {
            mutate({ selectedChat, msg });
        };
        webSocketService.on("chat.message", callback);
        return () => webSocketService.off("chat.message", callback);
    }, [mutate]);