How to get a destructured result from a fetch call inside a function, to be called in another function

Question

I'm testing destructuring of results fetched from an api. How do I call some of the data in a separate function

I fetched some data from this api https://randomuser.me/api/ in a function and destructured the results. And I am trying to get some data from the destructured result inside another function.

This is what i've managed so far:

let mail = () => { 
    fetch('https://randomuser.me/api/')
      .then(function(response) {
        return response.json();
      })
      .then(function(responseJson) {
        // i destructured to get out the 'results' inside the response
        let {results} = responseJson;
        // i'm using just the first object in the result (the result is an array)
        // hence this second destructuring
        let [profile] = [results[0]];

        // i can get log out the email when i call the function
        console.log('user mail: ', profile.email);
      });
}
mail(); // logs the current random email

Now instead of logging out that email, I want it in a div on button click

// html
<div id="mail"></div>
<button onclick="getMail()"></button>

// the onclick script
const getMail = ({email}) => {
    // this is where i'm stuck
    // i'm trying to get the email here 

    document.querySelector('#mail').innerHTML = `current email: ${email}`
}