Values from firestore showing as undefined

I have a program that polls the weather every 30 seconds and I was getting CORS errors. I investigated it and saw that the city and country were being read as undefined.

I get my user data from my users' table then send them with an Axios request to the weather API:

return axios({
    url: `https://europe-west1-hummid.cloudfunctions.net/api/weather`,
    method: 'POST',
    data: {
        city: data?.city,
        country: data?.country
    },
    headers: {
        Authorization: `${authToken}`
    },

I have but they're being sent as undefined. I currently have it set up using a useEffect to get the data from the users table

useEffect(() => {
    const userRef = db.collection('users').doc(currentUserEmail);
    userRef.get().then((doc) => {setData(toUser(doc));})
}, [currentUserEmail])

Then I pass it to a function that maps it to an interface:

export interface User {
    userId: string;
    fname: string;
    lname: string;
    country: string;
    city: string;
    email: string;
    phone: number;
}
export function toUser(doc: firebase.firestore.DocumentSnapshot): User {
    return {userId: doc.id, ...doc.data()} as User;
}

Is there a way to use my method of retrieving data or a better way to make sure I am not getting undefined values? Also, is the reason I am getting undefined because I am using optional chaining on the values?

from Values from firestore showing as undefined