laravel-websockets: Can't listen to events with echo on react-native

I'm trying to use laravel-websockets which implements pusher server but for some reason I can't listen to events even though I can see the events in Laravel websockets dashboard and in console.

https://github.com/beyondcode/laravel-websockets

In client( I'm using ngrok since I'm testing on local machine):

This is how I setup Pusher client and echo, I'm not receiving any alert:

//BASE_URL = https://9fa8-88-5-254-23.ngrok.io

const startPusherChatServerBetter = () =>
    {
        Pusher.logToConsole = true;
        
        let options = {
            key: env.PUSHER_APP_KEY,
            wsHost: env.BASE_URL,
            wsPort: '6001',
            wssPort: '6001',
            disableStats: true,
            logToConsole: true,
            encrypted: false,
            enabledTransports: ['wss','ws'],
        };

        let PusherClient = new Pusher(options.key, options);
        PusherClient.connection.bind( 'error', () => console.log('PusherClient::error', arguments))

        const echo = new Echo({
            broadcaster: 'pusher',
            client: PusherClient,
            ...options
        });

        echo.channel('chat').listen('MessageSent', (e) => {
            Alert.alert('RECEIVED');
        })
        .listenForWhisper('typing', (user) => {
            console.log('An user is typing...');
        });
    };

In backend:

How I fire event:

broadcast(new MessageSent($message))->toOthers();

My event:

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast; 
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow; 
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use App\Models\User;
use App\Models\Message;

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

    public $message;
    

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    

    public function broadcastOn()
    {
        return new Channel('chat');
    }

}

Channels file:

Broadcast::channel('chat', function () {
    return true;
});

broadcasting.php:

'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'encrypted' => false,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http'
            ],
        ],
    ],

When I send a message I see this in console:

Connection id 11646112.564636431 sending message {"event":"log-message","channel":"private-websockets-dashboard-api-message","data":{"type":"api-message","time":"17:58:14","details":"Channel: chat, Event: App\\Events\\MessageSent","data":"{\"message\":{\"body\":\"Jfjjejrje\",\"updated_at\":\"2022-01-21T16:58:14.000000Z\",\"created_at\":\"2022-01-21T16:58:14.000000Z\",\"id\":29}}"}}

In my console I also see this messages:

Pusher :  : ["State changed","initialized -> connecting"]
Pusher :  : ["Connecting",{"transport":"ws","url":"wss://https://9fa8-88-5-254-23.ngrok.io:6001/app/9b9a4890c38f28f43777?protocol=7&client=js&version=7.0.3&flash=false"}]
Pusher :  : ["State changed","connecting -> unavailable"]

And in dashboard events appear to be sent: https://i.imgur.com/My6Lymz.png