Facing an error that when user is login the profile pic & name display, but when user is logout the index pg is blank?

Help
,
1

it is my Navbar.jsx

import React from ‘react’;
import Link from ‘next/link’;
import { AiOutlineShopping } from ‘react-icons/ai’
import { Cart } from ‘./’
import { useStateContext } from ‘context/StateContext’;
import { useUser } from ‘@auth0/nextjs-auth0/client’;

const Navbar = () => {
const { showCart, setShowCart, totalQuantities } = useStateContext();
const { user, error, isLoading } = useUser();

if (isLoading) return <div>Loading...</div>;
if (error) return <div>{error.message}</div>;


return (
  user &&(
    <div className="navbar-container">
  <p className="logo">        
    <Link href="/">Fashion Fest</Link>
  </p>
  
  <a href="/api/auth/login">Login</a>
  <a href="/api/auth/logout">Logout</a>


  <div className='navbar-container'>
  <img className='icon' src={user.picture} alt={user.name} />
  <p className=''>{user.name}</p>
  
  </div>
  
  
  <button type="button" className="cart-icon" onClick={() => setShowCart(true)}>
    <AiOutlineShopping />
    <span className="cart-item-qty">{totalQuantities}</span>
  </button>

  {showCart && <Cart />}
</div>
  )
)

}

export default Navbar