Realtime connection not working on NextJs

'use client'
import React, { useEffect, useState } from 'react'
import { Client, Account } from 'appwrite';
import Connection from '@/lib/appwrite';

const Page = () => {
  const client = Connection();
  const account = new Account(client);
  const [user, setUser] = useState<any>(null);

    useEffect(() => {
        const fetchUser = async () => {
            try {
                const userData = await account.get();
                setUser(userData);
            } catch (error) {
                console.error('Error fetching user:', error);
            }
        };
        
        fetchUser();

        const unsubscribe = client.subscribe('account', (response) => {
            console.log('Account update received:', response);
            fetchUser(); 
        });

        return () => unsubscribe(); 
    }, []);
  return (
    <div>Page asd</div>
  )
}

export default Page