Hey guys, I just got started with using NextJs and I ran into this problem. I am trying to navigate from a client component to a server component but redirect nor useRouter is working. The code is below...

"use client";

import { createClient } from "@/utils/supabase/client";
import { useEffect, useState } from "react";
import { redirect } from "next/navigation";
import { useRouter } from "next/router";

const Home = () => {
    const [user, setUser] = useState<any>(null);
    const supabase = createClient();
    const router = useRouter()

    useEffect(()=> {
        const fetchUser = async() => {
            const { data, error } = await supabase.auth.getUser()
            if (error || !data?.user) {
                router.push('/login')

            } else {
                setUser(data)
            }
        }
        fetchUser();
    }, [])

    const signOutUser = async() => {
        await supabase.auth.signOut();
        router.push('/login')
    }

    if (!user) {
        return null;
    }

    return (
        <>
        <p> Welcome {user.user.email}</p>
        <button onClick={signOutUser}>Logout</button>
        </>
    )
}

export default Home

/login is a server component. I do have middleware set up. if there is another approach to this problem, please let me know. Thank you guys