Firebase.auth().currentuser not working on nextjs - reactjs

Question

I'm currently building a next.js app and I've run into an issue with Firebase (v8) Authentication where eventhough I can login, (and it works) I can't access the logged in user in my header since the the property of the user image is apparently undefinedeventhough on the console it appears!
import Image from "next/image";
import { MenuIcon, UserCircleIcon, SearchIcon, UsersIcon } from '#heroicons/react/solid';
import { useState } from "react"
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
import { DateRange } from 'react-date-range';
import { useRouter } from "next/router";
import firebase from "../firebase/clientApp";
import { useAuthState } from 'react-firebase-hooks/auth'
function Header({ placeholder }) {
const [searchInput, setSearchInput] = useState("");
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
const [noOfGuests, setNoOfGuests] = useState(1);
const router = useRouter();
return(
<header className='sticky top-0 z-50 grid grid-cols-3 bg-white shadow-md p-5 md:px-10'>
{/* left */}
<div className='relative flex items-center h-10 cursor-pointer my-auto'>
</div>
{/* middle - search */}
<div className='flex items-center mb:border-2 rounded-full py-2 md:shadow-sm'>
<input
value = {searchInput}
className='flex-grow pl-5 bg-transparent outline-none text-sm text-gray-600 placeholder-gray-400'
type="text"
/>
<SearchIcon
className='hidden md:inline-flex h-8 bg-blue-800 text-white rounded-full p-2 cursor-pointer md:mx-2'
/>
</div>
{/* right */}
<div className='flex items-center space-x-4 justify-end text-gray-500'>
<p className='hidden md:inline cursor-pointer'>Become a host</p>
<div className='flex items-center space-x-2 border-2 p-2 rounded-full cursor-pointer'>
<div className="flex items-center space-x-2" onClick={() => router.push("/login")}>
<MenuIcon className='h-6'/>
{/* Icon change - Here is where the code kabooms */}
{firebase.auth().currentUser !== null ?
(<Image className="h-6" src={firebase.auth().photoURL} width="100%" height="100%" objectFit="cover"/>):(<UserCircleIcon className='h-6'/>)}
</div>
</div>
</div>
</header>
);
}
export default Header

Answer 1

You would find photoURL property inside currentUser.
Change <Image className="h-6" src={firebase.auth().photoURL} width="100%" height="100%" objectFit="cover"/> to (<Image className="h-6" src={firebase.auth().currentUser.photoURL} width="100%" height="100%" objectFit="cover"/>