Anyone know why pusher is disconnecting within a minute of starting on the client ui?

// Pusher server side
import PusherServer from "pusher";
export const pusherServer = new PusherServer({
    appId: process.env.PUSHER_APP_ID!,
    key: process.env.NEXT_PUBLIC_PUSHER_APP_KEY!,
    secret: process.env.PUSHER_APP_SECRET!,
    cluster: "mt1",
    useTLS: true,
    timeout: 24 * 60 * 60,
});

// Pusher client side
import PusherClient from "pusher-js";
export const pusherClient = new PusherClient(
    process.env.NEXT_PUBLIC_PUSHER_APP_KEY!,
    {
        cluster: "mt1",
        forceTLS: true,
        activityTimeout: 24 * 60 * 60,
        pongTimeout: 24 * 60 * 60,
    }
);

// Function called from server side api
const updateSessionDB = async (body: {
    uuid: string;
    wins: number;
    losses: number;
    kills: number;
    deaths: number;
    assists: number;
    currentSr: number;
}) => {
    try {
        await db.session.update({
            where: {
                uuid: body.uuid,
            },
            data: {
                wins: body.wins,
                losses: body.losses,
                kills: body.kills,
                deaths: body.deaths,
                assists: body.assists,
                currentSr: body.currentSr,
            },
        });
        const { userId } = (await db.session.findUnique({
            where: {
                uuid: body.uuid,
            },
        })) as Session;
        pusherServer.trigger(`user-${userId}`, "stats-updated", {
            w: body.wins,
            l: body.losses,
            sr: body.currentSr,
        });

        return {
            success: true,
            error: null,
        };
    } catch (error) {
        return {
            success: false,
            error,
        };
    }
};

// Client side ui
const OverlayPage = ({ params }: OverlayPageProps) => {
    const { id } = params;

    const [stats, setStats] = useState({
        w: 0,
        l: 0,
        sr: 0,
        division: "Bronze 1",
    });

    useEffect(() => {
        const getStats = async (discordId: string) => {
            const response = await axios.get(
                `/api/stats/session?discordId=${discordId}&season=3`,
                getOptions
            );
            const { session } = response.data;

            if (session) {
                setStats({
                    w: session.wins,
                    l: session.losses,
                    sr: session.currentSr,
                    division: getDivision(session.currentSr),
                });
            }
        };

        try {
            getStats(id);

            // Subscribe to a channel specific to the user
            const channel = pusherClient.subscribe(`user-${id}`);

            // Listen for an event with updated stats
            channel.bind(
                "stats-updated",
                (data: { w: number; l: number; sr: number }) => {
                    setStats({
                        w: data.w,
                        l: data.l,
                        sr: data.sr,
                        division: getDivision(data.sr),
                    });
                }
            );

            return () => {
                channel.unsubscribe();
                pusherClient.disconnect();
            };
        } catch (error) {
            console.log(error);
        }
    }, [id]);

    return id === "415067295715557376" ? (
        <div className="flex flex-row text-6xl gap-0 w-full ">
            <div className="p-4 flex flex-col">
                <p>
                    W: {stats.w} / L: {stats.l}
                </p>
                <p>SR: {stats.sr}</p>
                <p>{stats.division}</p>
            </div>
        </div>
    ) : (
        <div className="flex flex-row text-6xl gap-3">Coming Soon</div>
    );
};
export default OverlayPage;