Basic events not working with Presence Channels, Next JS 14

[Lezlus]

Basic events such as subscripttion_succeeded are not triggering after subscribing to a presence channel even after successful user authorization.
Here is my pusher.ts file

import Pusher from "pusher";
import pusherJs from "pusher-js";

export const pusherServer = new Pusher({
  appId: process.env.PUSHER_APP_ID!,
  key: process.env.NEXT_PUBLIC_PUSHER_APP_KEY!,
  secret: process.env.PUSHER_APP_SECRET!,
  cluster: "us2",
  useTLS: true,
});

export const pusherClient = new pusherJs(process.env.NEXT_PUBLIC_PUSHER_APP_KEY!, {
  cluster: 'us2',
  authEndpoint: "api/pusher/auth",
});

Here is my api/pusher/auth which returns a 200 response code

export async function POST(req: Request) {
  const body = await req.text();
  const params = new URLSearchParams(body);
  const socket_id = params.get("socket_id")!;
  const channel_name = params.get("channel_name")!;
  console.log(socket_id, channel_name);
  try {
    const session = await getServerSession(authOptions);
    if (session) {
      if (session.user) {
        // Authenticated by knowing user is in our DB
        const user = validateUsersSchema(session.user);
        console.log(user);
        const auth = pusherServer.authorizeChannel(socket_id, channel_name, {
          user_id: user.id,
          user_info: {
            username: user.name,
            activityStatus: user.activityStatus,
            online: user.online
          }
        })
        console.log(auth);
        return NextResponse.json({ auth });
      }
    } else {
      return NextResponse.json({success: false}, { status: 404 });
    }
  } catch (err) {
    console.log(err);
    return NextResponse.json({ err }, { status: 500 });
  }
}

When I console.log(auth) I get
{
channel_data: '{"user_id":"66b1771683f79688fd09e509","user_info":{"username":"RafaelB","activityStatus":"ONLINE","online":true}}',
auth: 'e63f526933f87ce4309e:ad9606df3777e20c742a049fbe62e0a872bee7d25b7c095138dfbc9f7a48965f'
}
Here is my React code

  useEffect(() => {
    if (session?.user) {


      const user = validateUsersSchema(session?.user);
      setUser(user);

      const presenceChannel = pusherClient.subscribe("presence-channel")

      const presenceChannelSubscription = (members: PresenceChannelData) => {
        console.log("New User in presence-channel");
      }

      presenceChannel.bind("pusher:subscription_succeeded", presenceChannelSubscription)

I have public channels that I subscribed too as well in this useEffect and they run normally