AWS graphql subscription returning null when mutation is made inside lambda

I am making an appsync mutation from a lambda function to update a dynamodb table. The issue is that the subscription from the frontend returns null even though the mutation is successful. Please see the code below:

Custom appsync client

import crypto from "@aws-crypto/sha256-js";
import { defaultProvider } from "@aws-sdk/credential-provider-node";
import { SignatureV4 } from "@aws-sdk/signature-v4";
import { HttpRequest } from "@aws-sdk/protocol-http";
import { default as fetch, Request } from "node-fetch";

interface AppSyncProps {
  endpoint: string; // AppSync GraphQL endpoint URL
  region: string; // AWS region of the API
}

export class AppSyncConnector {
  private endpoint: string;
  private region: string;

  constructor(props: AppSyncProps) {
    this.endpoint = props.endpoint;
    this.region = props.region;
  }

  async mutate<TInput>(query: string, variables: TInput) {
    console.log(this.endpoint);
    console.log(this.region);
    const endpoint = new URL(this.endpoint);
    const signer = new SignatureV4({
      credentials: defaultProvider(),
      region: this.region,
      service: "appsync",
      sha256: crypto.Sha256,
    });

    const requestToBeSigned = new HttpRequest({
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        host: endpoint.host,
      },
      hostname: endpoint.host,
      body: JSON.stringify({ query, variables }),
      path: endpoint.pathname,
    });

    const signed = await signer.sign(requestToBeSigned);
    const request = new Request(this.endpoint, signed);

    let statusCode = 200;
    let body: Record<string, any> = {};
    let response;

    try {
      response = await fetch(request);

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      body = (await response.json()) as Record<string, any>;
      if (body.errors) statusCode = 400;
    } catch (error) {
      statusCode = 400;
      body = {
        errors: [
          {
            status: response?.status,
            message: (error as Error).message,
            stack: (error as Error).stack,
          },
        ],
      };
    }

    return {
      statusCode,
      body: JSON.stringify(body),
    };
  }
}

Notifications Table Model

import { a } from "@aws-amplify/backend";

export const Notifications = a
  .model({
    notificationId: a.string().required(),
    recipientId: a.string().required(),
    notificationType: a.enum(["LIKE", "FOLLOW"]),
    isSeen: a.boolean().required(),
    actorId: a.string().required(),
    actorHandle: a.string().required(),
    actorName: a.string().required(),
    resourceId: a.string(),
  })
  .identifier(["notificationId"])
  .authorization((allow) => [allow.authenticated().to(["read", "update"])]);

Frontend

function RouteComponent() {
  const data = useRouteContext({ from: "/(authenticated)/_layout" });
  useEffect(() => {
    const createNotifSub = client.models.Notifications.onCreate().subscribe({
      next: (a) => console.log(a),
      error: (error) => console.log(error),
    });
    return () => createNotifSub.unsubscribe();
  }, []);