Laravel Echo not subscribing to Pusher Presence Channel, not even in Pusher dashboard

I have spend many hours to solve this issue of mine, reading the doc multiple times, googling here and there: SO, Laracast, Larachat, etc, but still couldn't get Laravel Echo to subscribe to Pusher presence channel, and it doesn't show any error in console tab

Public and Private channel are working fine and smooth, users can subscribe, users can listen / trigger event(s)

Note: before creation of this post, I have search questions related to my current issue, none of them have answer

Some questions similar to mine:

https://laravelquestions.com/2020/12/15/laravel-echo-not-joining-presence-channel-in-production/
Laravel Echo + Laravel Passport auth in private / presence websockets channels
https://laravel.io/forum/facing-issues-upon-subscribing-to-presence-channel
etc..

Spec:

Laravel: 7.30.1
laravel-Echo: 1.10.0 (latest; atm)
pusher/pusher-php-server: 4.0
pusher-js: 7.0.3 (latest; atm)

In resource/js/bootstrap.js

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
    authEndpoint: '/api/broadcasting/auth',
    auth: {
        headers: {
            'Authorization': `Bearer ${localStorage['token']}`
        }
    }    
});

In routes/api.php

// https://stackoverflow.com/questions/55555844/authorizing-broadcasting-channel-in-an-spa
Route::post('/broadcasting/auth', function (Request $request) {
    $pusher = new Pusher\Pusher(
        env('PUSHER_APP_KEY'),
        env('PUSHER_APP_SECRET'),
        env('PUSHER_APP_ID'),
        [
            'cluster' => env('PUSHER_APP_CLUSTER')
        ]
    );

    // This will return JSON response: {auth:"__KEY__"}, see comment below
    // https://pusher.com/docs/channels/server_api/authenticating-users
    $response = $pusher->socket_auth($request->request->get('channel_name'), $request->request->get('socket_id'));

    return $response;
})->middleware('auth:sanctum');

In routes/channels.php

// https://laravel.com/docs/8.x/broadcasting#authorizing-presence-channels
Broadcast::channel('whatever', function ($user) {
    return [
        'id' => $user->id,
        'name' => $user->name
    ];
});

In home.vue

...
...
created() {
    Echo.join('whatever') // DOES NOT WORK, Even in mounted() vue lifehook, and in Pusher dashboard, it doesn't show this channel name
        .here((users) => {
            console.table(users)
        })
}

Q: Why Laravel Echo not subscribing to Pusher presence channel? and even in Pusher, it doesn't show channel name: presence-whatever, only disconnected (after I refreshed the page) and then connected like nothing happen

Thanks in advance

1. Make sure to set the broadcast driver to .env after that do php artisan config:clear BROADCAST_DRIVER=pusher

2. Ferify your auth.php. I have like this

enter image description here