this is my webhook for useCurrentUser to return the session data of the user

src\hooks\useCurrentUser.ts

import { useSession } from "next-auth/react"

export const useCurrentUser = () => {
    const session = useSession()
    console.log(session.data?.user)

    return session.data?.user
}

this is some part of the code for my MainNav in Navbar component where if the user is logged in, the <userButton /> renders, else it displays the login button

this is my useCurrentUser component with an unfinished logout button

but the problem is, I need to refresh so the session displays, same thing when I log out, I tried console.log the session as u can see from the webhook but it will display undefined after I log in unless if you refresh.

In additional, my middleware/protected route is working fine, and the session in backend automatically displays the user session details after I log in when I tested in console.log, it seems the front-end is the problem, any good solutions in here sir/maam?