Why is this newProject() function always declaring the tasks property as an empty array []?

When the page loads, the console.log(JSON.parse(localStorage.getItem(`${name}`))) is null so the tasks will be declared as an empty array, however when I refresh the page, the console.log(JSON.parse(localStorage.getItem(`${name}`))) is not null anymore, so the tasks should be declared as (JSON.parse(localStorage.getItem(`${name}`))) and not an empty array

export const allProjects = JSON.parse(localStorage.getItem("allProjects")) ?? [];


export function newProject(name) {

    console.log(JSON.parse(localStorage.getItem(`${name}`))) 
    // Null, when opening page for the first time

    allProjects.push({
        projectTitle: name,
        id: crypto.randomUUID(),
        tasks: JSON.parse(localStorage.getItem(`${name}`)) ?? []
    })
    getProjectId(name)

    localStorage.setItem("allProjects", JSON.stringify(allProjects))
}

newProject("Default")
newProject("random stuff")

export function newTask(projectTitle, title, desc, dueDate, priority) {
    getProjectId(projectTitle)
    project.tasks.push({
        title: title,
        id: crypto.randomUUID(),
        desc: desc,
        dueDate: dueDate,
        priority: priority
    })
    getTaskId(title)

    localStorage.setItem(project.projectTitle, JSON.stringify(project.tasks))
    localStorage.setItem(title, JSON.stringify(task))
}

newTask("Default", "first task", "desc", "due Date", "urgent")
newTask("Default", "second task", "desc", "due date", "no urgent")


// GET ID FUNCTIONS 

export let projectId;
export let project;

export function getProjectId(projectName) {
    project = allProjects.find(obj => obj.projectTitle === projectName)
    projectId = project.id;
    return {
        projectId,
        project
    }
}

export let task;
export let taskId;
export let altTask;

export function getTaskId(taskName) {
    
    
    task = project.tasks.find(task => task.title === taskName)
    altTask = task;
    taskId = task.id;
    
    return task, taskId
}