I have a button in my navbar. If user is not authenticated, it shows "login/resister" and on click redirect to login page, and if the user is authentiacted to have a dropdown menu. The problem I am facing is upon load or refresh "login/resister" is shown for a few milliseconds and if pressed redirects to the login page until the session is retrieved.

"use client"
import PersonIcon from '@mui/icons-material/Person';
import { useSession } from 'next-auth/react';
import { useState } from 'react';
import Dropdown from './DropdownMenu';
import { useRouter } from 'next/navigation'

function Profile () {
  const {data:session} = useSession();
  const router = useRouter()
  const [isDropdown, setDropdown] = useState(false)


  function handleDropdown(){
    setDropdown((prev)=>!prev)
  }

  return (
    <div onClick={session? handleDropdown : ()=>router.push("/signin") }>
      <div className='icon-link'><PersonIcon/>
      <span>{!session? "Login/Regester":""}</span>
      </div>
      {isDropdown&&<Dropdown/>}
    </div>
  )
}

export default Profile