Save an ES6 promise to a variable to use elsewhere [closed]

I’m new to async JS so I’m currently tryna make my way through using promises.

I have the following function that returns a promise in either its resolved or rejected state:

export const getGeographicalCoordinates = locationName => {
    fetch(`http://api.openweathermap.org/geo/1.0/direct?q=${locationName}&limit=1&appid=${KEY}`)
    .then(response => response.json())
    .then(data => {
        const p = new Promise((resolve, reject) => {
            if (!(data.length)) {
                return reject(new Error(`${locationName} is not a valid location`));
            } else {
                return resolve([data[0].lat, data[0].lon]);
            }
        })
        return p;
    })
}

I want to then use the function like this:

btn.addEventListener('click', e => {
    getGeographicalCoordinates(location).then(value => console.log(value))
});

However I get the following error Uncaught TypeError: (void fetch(...).then(...).then(...)) is undefined.

---

I’m confused because when I make the following changes by adding the next method inside the function itself (and remove the next method after the function call from earlier), there’s no error and works as intended:

export const getGeographicalCoordinates = locationName => {
    fetch(`http://api.openweathermap.org/geo/1.0/direct?q=${locationName}&limit=1&appid=${KEY}`)

    ... // (code cut out for brevity)

    .then(value => console.log(value)) // doesn't error and logs as intended.
}

If anyone is able to explain what is happening and help to point me towards a solution to my problem that’d be great!
Thank you