Подписка Graphql не получает переменные на стороне клиента

Я пытаюсь подписаться на подписку graphql-yoga с помощью apollo-client useSubscription hook

import React from 'react';
import {useSubscription,gql} from '@apollo/client';

const SUB_NEW_MSG = gql`
    subscription SUB_NEW_MSG($chatRoom:ID!)
    {
        newMessage(chatRoom:$chatRoom)
    }`;


function NewMsg(){

    const { loading,error,data } = useSubscription(SUB_NEW_MSG,{
        variables:{
            chatRoom: "608851227be4796a8463607a",
        },
    });
    
    if(loading) return <p>loading...</p>;
    if(error) return <p>{error}</p>;
    
    console.log(data);
    return <h4>New Message:{data.newMessage}</h4>;
}

Состояние сети

Но выдает ошибку: Ошибка: объекты недопустимы в качестве дочернего элемента React (обнаружено: ошибка: переменная $ chatRoom требуемого типа ID! Не была предоставлена.). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Схема на бэкэнде

type Subscription{
    newMessage(chatRoom: ID!): String!
}

резолвер

const { pubsub } = require("../helper");
const { withFilter } = require("graphql-yoga");

module.exports = {
    Subscription: {
        newMessage: {
            subscribe: withFilter(
                () => pubsub.asyncIterator("newMessage"),
                (payload, variables) => {
                    console.log(payload.query, variables, "HALO");
                    return payload.chatRoom === variables.chatRoom;
                }
            ),
        },
    },
};

Но когда я передаю запрос, как показано ниже, без переменных для использования ловушки подписки, это работает

const SUB_NEW_MSG = gql`
    subscription SUB_NEW_MSG
    {
        newMessage(chatRoom:"608851227be4796a8463607a")
    }`;

Что мне делать? Есть ли обходные пути?