Error: JSON returned from channel-authorization endpoint was invalid, yet status code was 200. Data was:

[anuradhan]

Version:

• @inertiajs/react version: 1.0.0

Describe the problem:

this error is produced when using private channel with pusher.
public channel works fine without any error.

using
Laravel Echo + Pusher
on
Laravel + React.js + Inertia.js

code on bootstrap.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 ?? 'ap2',
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,
forceTLS: true,
// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
enabledTransports: ['ws', 'wss'],
});

code on react.jsx file
window.Pusher.logToConsole = true;
window.Echo.logToConsole = true;
window.Echo.private('App.Models.User.'+user.id).listen('.notifications', (e) => {
console.log(e);
alert('hi');
});

code on notification event

i googled and found many are having similar issues. so, i tried changing auth endpoint, still no luck.
does inertia have this issue unresolved? or do we have a solution for this?