Firebase.auth().currentuser not working on nextjs

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