graphql-ws query subscribeToMore updateQuery not firing

Im tryin to get my queries to update using the subscribeToMore function. Im getting lost on why the code is a failing to execute. so far all operations query, mutation and subscribe will work independently.

FRONTEND

export const QUERY_MESSAGES = gql`
  query Messages($convoId: ID!) {
    messages(convoId: $convoId) {
      text
      senderId
      convoId
      createdAt
    }
  }
`;

export const SUBSCRIBE_MESSAGES = gql`
  subscription Messages($convoId: ID!) {
    messages(convoID: $convoID) {
      text
      convoId
    }
  }
`;

const ActiveChat = ({ currentConvo, me }: any) => {
  const { subscribeToMore, data } = useQuery(QUERY_MESSAGES, {
    variables: {
      convoId: currentConvo,
    },
  });


  return (
    <section className="chat-wrapper">

      <div className="messages-container">
        <Messages
          messages={data.messages}
          me={me}
          subscribeToMessages={() => {
            subscribeToMore({
              document: SUBSCRIBE_MESSAGES,
              variables: { convoId: currentConvo },
              updateQuery: (prev, { subscriptionData }) => {
                console.log("hit");
                if (!subscriptionData.data) return prev;
                const newFeedItem = subscriptionData.data.messages;

                return Object.assign({}, prev, {
                  messages: [newFeedItem, ...prev.messages],
                });
              },
            });
          }}
        />
        <Input currentConvo={currentConvo} />
      </div>
    </section>
  );
};

const Messages = ({ messages, me, subscribeToMessages }: any) => {
  useEffect(() => {
    subscribeToMessages();
    console.log("use effect ran");
  });

  const formatTime = (time: number) =>
    new Date(time * 1000).toLocaleTimeString();
  console.log(messages);
  return (
    messages && (
      <div>
        {messages.map((message: any, i: number) => {
          return message.senderId === me?._id ? (
            <SenderBubble
              key={i}
              text={message.text}
              time={message.createdAt}
              formatTime={formatTime}
            />
          ) : (
            <OtherUserBubble
              key={i}
              text={message.text}
              time={message.createdAt}
              formatTime={formatTime}
            />
          );
        })}
      </div>
    )
  );
};

BACKEND

const pubsub = new PubSub();
  Query: {
 
    messages: async (parent, { convoId }, context) => {
      if (context.user) {
        return Message.find({ convoId }).sort({ createdAt: "asc" });
      }
    },
  },

  Mutation: {

    /// creates a new message using sender id and emits MESSAGE_SENT event

    sendMessage: async (parent, { text, convoId }, context) => {
      pubsub.publish("MESSAGE_SENT", {
        message: { text, convoId },
      });

      return Message.create({ text, convoId, senderId: context.user._id });
    },

   
  },
  Subscription: {
    userActive: {
      subscribe: () => pubsub.asyncIterator("ACTIVE_USERS"),
    },
    message: {
      subscribe: withFilter(
        () => pubsub.asyncIterator("MESSAGE_SENT"),
        (payload, variables) => {
          return payload.message.convoId === variables.convoId;
        }
      ),
    },
  },

tdlr: I think subscribeToMore.updateQuery isn't firing but i don't how to debug

SOLVED: turns out I placed the wrong url and port number while building the client so the ws wasn't connecting.