still giving error after using the use client on top in next.js component

× You’re importing a component that needs useRouter. It only works in a Client Component but none of its parents are marked with “use client”, so they’re Server Components by default.

"use client ";
import { useRouter } from 'next/navigation'


export const NavBar = () => {
const router = useRouter()

return (
    <div className='fixed inset-x-0 top-0 h-20 bg-gray-900 flex items-center justify-between px-10'>
        <div>

        </div>
        <div>
            <button
                onClick={() => router.push('/api/auth/signin')}
                className='bg-blue-500 text-white px-4 py-2 rounded-md'>
                Login
            </button>
        </div>
    </div>
)}

as you can see i using the ‘use client’ on top of file but still its giving me error, that i can not use useRouter in client component and its showing mark the parent component as ‘use client’, then my whole page will become client component if i mark it.

then what the point to use the next.js if my whole page is client component. help me to solve it without making parent component as client component.