Pusher working only after refreshing page

I'm implementing pusher in a web application using nextjs. It works as expected in my development environment. But it does not work correctly when I deploy it to vercel. I can only see the results when I refresh the page in the browser.

This is the implementation for the client:

useEffect(() => {

    const pusher = new Pusher(`${process.env.PUSHER_KEY}`, {
        cluster: `${process.env.PUSHER_CLUSTER}`,
        useTLS: true
    });

    const channel = pusher.subscribe('franks-auto-spa');
    channel.bind('cancel-wash', data => {
        console.log(data.date);
        removeWash(data.date);
    });

}, []);

And this is the implementation for the API:

export default async (req, res) => {

    const connection = await mysql.createConnection(process.env.DATABASE_URL);
    console.log(req.body.date);
    const result = await connection.query('DELETE FROM ongoing WHERE date = ?', [req.body.date]);
    console.log(result);

    const pusher = new Pusher({
        appId: `${process.env.PUSHER_ID}`,
        key: `${process.env.PUSHER_KEY}`,
        secret: `${process.env.PUSHER_SECRET}`,
        cluster: `${process.env.PUSHER_CLUSTER}`,
        useTLS: true
    });

    pusher.trigger('franks-auto-spa', 'cancel-wash', req.body);
    res.json({message: 'Wash deleted deleted...'});
}

Am I missing any configuration in Vercel?

I've had this problem too, once or twice; Vercel times out after a little bit. (10 seconds on Hobby) So using a database with Vercel probably isn't gonna fly. Have you tried switching to the Pro plan? Or you could switch to Heroku, which not only has a longer timeout (30 seconds), but also supports websockets.