Pusher.js subscribing and pushing to channel from React client not working

Question

I've got a React web app subscribing to a Pusher channel that receives events triggered by an API - in this scenario, everything works fine. I now want to trigger events from the React web app itself and not the API, however, and I'm doing so via a presence channel as I used to get warnings saying only allowed on private or presence channels. Nothing happens though when I trigger the event from the React web app. And I can't see the channel is being subscribed to on the dashboard.

AccountPage.js

const videoPusherChannel = useRef<any>();

useEffect(() => {

        var pusher = new Pusher('<PUSHER_KEY>', {
            cluster: 'eu',
        });

        const videoChannel = pusher.subscribe(`presence-video-starting.${authState.userId}`);

        videoChannel.bind('client-video-10-mins', function (data: any) {

            alert("test");
            return true;
        });

        videoPusherChannel.current = videoChannel;
}, []);


useEffect(() => {


        videoPusherChannel.current.trigger("client-video-10-mins", {
            type: 'video-starting',
            user: authenticatedUser,
            data: []
        });
}, [videoPusherChannel.current]);

• First render, pusher instance is created and channels are subscribed to. Channels are assigned to refs to ensure access outside the hook
• Once ref has a value i.e. channels are subscribed, trigger the client-video-10-mins event

Nothing happens - no error. The Pusher dashboard doesn't show a subscribe event for the channel, and I don't see the alert 'test' on the browser.

Where am I going wrong??

*** UPDATED ***

Screenshot from dev console:

Authenticate function from my API (with the user's hardcoded values for the sake of testing):

public function authenticate(Request $request)
    {

        $socketId = $request->socket_id;
        $channelName = $request->channel_name;

        $pusher = new Pusher(<PUSHER_KEY>, <PUSHER_INFO>, <PUSHER_INFO>, [
            'cluster' => 'eu',
            'encrypted' => true
        ]);

        $presence_data = ['name' => "Tom Tom"];
        $key = $pusher->presence_auth($channelName, $socketId, 6, $presence_data);

        return response($key);
    }