How do i extract the "data.id" from the first function to the secound function?

Question

Im trying to use some of the information i got from the first API Call, to make a new API call to another API, but i cant seem to figure out how to bring the value from data.id from the first to the secound function.

When i try this, the sumId returns with "undefined" everything else works as intended, but i have been struggling on this part for a while now and cant figure out what the problem is.

const name = "ffsbroman"
const API_KEY = ""
let url = "https://euw1.api.riotgames.com/lol/summoner/v4/summoners/by-name/" + name + "?api_key=" + API_KEY;
let sumId;
let sumIdUrl;

async function getApi() {
  try {
    const response = await fetch(url);
    const data = await response.json();

    renderHTml(data);
  } catch (error) {
    console.log("Something went wrong trying to fetch API");
  }
}

getApi();

function renderHTml(data) {
  const container = document.querySelector('.container');
  const div = document.createElement('div');
  const sumName = document.createElement('h2');
  const sumLevel = document.createElement('h3');
  const sumIcon = document.createElement('img');
  sumName.textContent = data.name;
  sumLevel.textContent = "Level: " + data.summonerLevel;
  sumIcon.setAttribute('src', 'https://ddragon.leagueoflegends.com/cdn/13.6.1/img/profileicon/' + data.profileIconId + '.png');
  div.appendChild(sumName);
  div.appendChild(sumLevel);
  div.appendChild(sumIcon);
  container.appendChild(div);
  console.log(data.name)
  console.log(data.summonerLevel)
  console.log(data)
  console.log(data.id)

  sumId = data.id;
  sumIdUrl = "https://euw1.api.riotgames.com/lol/champion-mastery/v4/champion-masteries/by-summoner/" + sumId + "?api_key=" + API_KEY;
}

async function getChampMast() {
  const sumIdUrl = "https://euw1.api.riotgames.com/lol/champion-mastery/v4/champion-masteries/by-summoner/" + sumId + "?api_key=" + API_KEY;
  try {
    const response2 = await fetch(sumIdUrl);
    const champMast = await response2.json();

    renderChampMast(champMast);
  } catch (error) {
    console.log("Something went wrong trying to fetch API");
  }
}

getChampMast();

function renderChampMast(champMast) {
  console.log(champMast)
}