Laravel Livewire Event Not Received in Component After Pusher Broadcast

livewire=3 laravel =10
I am working on a Laravel project that uses Livewire for real-time messaging, with events being broadcasted via Pusher. The issue I am facing is that the event is recognized by Pusher, but my Livewire component is not receiving the broadcasted event.

Pusher Setup:
I have set up Pusher and can see events being broadcasted successfully in the Pusher dashboard.
The Pusher setup in resources/js/app.js looks like this:

import Echo from "laravel-echo";

import Pusher from "pusher-js";
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: "pusher",
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? "mt1",
    wsHost: import.meta.env.VITE_PUSHER_HOST
        ? import.meta.env.VITE_PUSHER_HOST
        : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
});

and the event from livewire

$members = ConversationMember::where('conversation_id', $this->conversationId)->get();
        foreach ($members as $member) {
            if ($member->user_id != Auth::id()) {
                event(new MessageSent($this->newMessage, Auth::id(), $member->user_id, $this->conversationId));
            }
        }

MessageSent.php

<?php

namespace AppEvents;

use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;
use IlluminateContractsBroadcastingShouldBroadcastNow;

class MessageSent implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    public $user_id;
    public $res_id;
    public $conversation_id;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message, $user_id, $res_id, $conversation_id)
    {
        $this->message = $message;
        $this->user_id = $user_id;
        $this->res_id = $res_id;
        $this->conversation_id = $conversation_id;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return IlluminateBroadcastingChannel|array
     */
    public function broadcastOn()
    {
        return new Channel("users.{$this->user_id}");
    }

    /**
     * Get the broadcastable data.
     *
     * @return array
     */
    public function broadcastWith()
    {
        return [
            'conversation_id' => $this->conversation_id,
            'user_id' => $this->user_id,
            'message' => $this->message,
            'res_id' => $this->res_id,
        ];
    }
}

the event listener

  public function getListeners()
    {

        return [
            "echo-private:users.{$this->user_id},.App\Events\MessageSent" => 'receiveMessage_e',
            'conversationSelected' => 'loadConversation',
            'conversationStarted' => 'handleConversationStarted',
            'messageReceived' => 'receiveMessage'
        ];
    }

public function receiveMessage_e($event)
{
    dd($event); // This never gets triggered
}

and last the debug console “pusher” pusher

I configured Pusher correctly in app.js and verified that events are being broadcasted successfully to the Pusher dashboard. In my Livewire component, I set up the getListeners method to listen for the MessageSent event using the correct channel and event syntax.

What I Expected:
I expected the Livewire component to receive the broadcasted event and trigger the receiveMessage_e method, which would dump the event data.

What Happened:
The event was successfully broadcasted to Pusher, but the receiveMessage_e method in the Livewire component was never triggered, and the event data was not received in the browser.