Bug when defining a response type for a function that returns a Promise

Question

I have a small bug, I want to set that my function that returns a promise could return a Promise that has a response type of either HabitModel[] or undefined as well, I defined it as in this picture : defining the promise , and it seems to work here.

export const getHabits = async (): Promise<HabitModel[] | undefined> => {
    try {
        const {data} = await api.fetchHabits()
        return data
    } catch (error) {
        console.log(error.message)
    } 
}

But when I use the function, undefined is skipped and the response type is set as only HabitModel[] instead of HabitModel[] | undefined, like that :

getHabits().then((response) => {
            response.forEach((habit) => {
                addHabit({
                    name: habit.name,
                    _id: habit._id,
                    colors: habit.colors,
                })
            })
        })

see this picture