Ive been looking into trying to get information from websites using fetch. Trying async/await was my first solution, and so far it has been going well. Getting the information I needed was a breeze, but trying to retrieve that data in main is my problem. Const data in my main function even with the await tag only returns an undefined object. How can I get the data that I have in the function into my main

import React from "react";
import {
  WASTEMANAGEMENT_USERNAME,
  WASTEMANAGEMENT_PASSWORD,
  WASTEMANAGEMENT_APIKEY_AUTH,
  WASTEMANAGEMENT_APIKEY_CUSTID,
  WASTEMANAGEMENT_APIKEY_DATA,
} from "@env";

async function login() {
  let response = await fetch("https://rest-api.wm.com/user/authenticate", {
    method: "POST",
    headers: {
      "content-type": "application/json",
      apikey: WASTEMANAGEMENT_APIKEY_AUTH,
    },
    body: JSON.stringify({
      username: WASTEMANAGEMENT_USERNAME,
      password: WASTEMANAGEMENT_PASSWORD,
      locale: "en_US",
    }),
  });
  let res = await response.json();

  const id = res.data.id;
  const access_token = res.data.access_token;

  response = await fetch(
    `https://rest-api.wm.com/authorize/user/${id}/accounts?lang=en_US`,
    {
      method: "GET",
      headers: {
        oktatoken: access_token,
        apikey: WASTEMANAGEMENT_APIKEY_CUSTID,
      },
    }
  );
  res = await response.json();

  const custId = res.data.linkedAccounts[0].custAccountId;

  response = await fetch(
    `https://rest-api.wm.com/account/${custId}/invoice?userId=${id}`,
    {
      method: "GET",
      headers: {
        apikey: WASTEMANAGEMENT_APIKEY_DATA,
        token: access_token,
      },
    }
  );
  res = await response.json();

  res.body.balances.filter((item) => {
    if (item.type === "Current") {
      console.log(item);
      return item;
    }
  });
}

const WasteManagementLogin = async () => {
  const data = await login();
  console.log(data);
};

export default WasteManagementLogin;