useRealtime not updating on table changes with filtering applied

[RichardSPrins]

I am working on a messaging feature prototype for my nextJS app, and have manually been inserting rows into both my 'conversations', and 'messages' tables expecting to see some updates, but nothing is coming through.

I have some filtering being applied to select criteria for the query to follow which is to be expected with a db query.

Here are my queries:

export function getUserConversationsSB(_userId) {
  const [{ data, error }] = useRealtime(CONVERSATIONS_TABLE, {
    select: {
      columns: '*, conversation_members!inner(*), users!conversation_members(*)',
      filter: useFilter((q) => {
        return q.eq('conversation_members.user_id', _userId);
      }),
    },
  });
  if (error) {
    console.error(error);
  }

  return data;
}

export function getMessagesByConversationSB(conversationId) {
  const [{ data, error }] = useRealtime(MESSAGES_TABLE, {
    select: {
      columns: '*, conversations!inner(*)',
      filter: useFilter((q) => {
        return q.eq('conversations.id', conversationId);
      }),
    },
  });

  if (error) {
    console.error(error);
  }

  return data;
}

and here are the different ways I am trying to use these functions inside a React component:

  const convos = getUserConversationsSB(user.id);
  // const messages = getMessagesByConversationSB(3);

  const [{ data, error }] = useRealtime('messages', {
    select: {
      columns: '*, conversations!inner(*)',
      filter: useFilter((q) => {
        return q.eq('conversations.id', 3);
      }),
    },
  });

I have even tried running the hook directly inside the React component as seen above for getting messages. but with no success. I am logging these values in a useEffect to observe any changes.

Am I doing something wrong?