On page refresh Projects Context is returning projectsMap as undefined. How do I fix this?

Question

When I refresh the Projects page, my Projects Context is returning projectsMap as undefined causing the error: Uncaught TypeError: can't convert undefined to object. However, when I comment out

**{
    Object.keys(projectsMap).map((id) => {
        const projects = projectsMap[id];
        return (
            <h1 key={id}>{projects.name}</h1>
        );
    })
}**

and uncomment the code I don't have any errors. I assume this has to do with the async await assignment of projectMap to the return value from getProjects(currentUser). Any help would be greatly appreciated. Below is the code from firebase.utils for getProjects, the projects.context file and the projects.component.jsx files respctivly.

firebase.utils.js:

export const getProjects = async (userAuth) => {
    if (!userAuth) return;
    const projectsCollectionRef = collection(
        db,
        "users",
        userAuth.uid,
        "projects"
    );
    const q = query(projectsCollectionRef);
    try {
        const querySnapshot = await getDocs(q);
        const projectMap = querySnapshot.docs.reduce((acc, docSnapshot) => {
            const id = docSnapshot.id;
            const { name } = docSnapshot.data();
            acc[id] = {id, name};
            return acc;
        }, {});
        return projectMap;
    } catch (error) {
        console.log("Error getting project docs.");
      }
};

projects.context.jsx:

import { createContext, useContext, useState, useEffect } from "react";
import { UserContext } from "./user.context";
    
import { getProjects } from "../utils/firebase/firebase.utils";
    
export const ProjectsContext = createContext({
    projectsMap: {},
});
    
export const ProjectProvider = ({ children }) => {
    const [projectsMap, setProjectsMap] = useState({});
    const { currentUser } = useContext(UserContext);
    
    useEffect(() => {
        const getProjectsMap = async () => {
            const projectMap = await getProjects(currentUser);
            setProjectsMap(projectMap);
        };
        getProjectsMap();
    });
    
    const value = { projectsMap };
    
    return (
        <ProjectsContext.Provider value={value}>
            {children}
        </ProjectsContext.Provider>
    );
};

Projects.jsx:

import { useEffect, useContext } from "react";
import { Outlet } from "react-router-dom";
        
import { UserContext } from "../../contexts/user.context";
import { ProjectsContext } from "../../contexts/projects.context";
        
import { getProjects } from "../../utils/firebase/firebase.utils";
import CreateProjectForm from "../../components/create-project/Create-Project-Form.component";
        
const Projects = () => {
    const { projectsMap } = useContext(ProjectsContext);
    
    return (
        <>
            <CreateProjectForm />
            {
                Object.keys(projectsMap).map((id) => {
                    const projects = projectsMap[id];
                    return (
                        <h1 key={id}>{projects.name}</h1>
                    );
                })
            }
            <Outlet />
        </>
    );
};  

export default Projects;

Answer 1

The solution was to change setProjectsMap(projectMap) to

projectMap ? setProjectsMap(projectMap) : setProjectsMap({});