fetch return [object promise] instead of data even after using then in authConfig.js in MSAL-React

Question

I'm using msal-react in my application. I want to get the clientId from an api (http://localhost:7071/api/api). Fetch returns [Object promise]instead of actual data. In the console it printed correctly. However, I am not sure where it went wrong.

authConfig.js

var scope = '';
var id ='';

const characters = fetch('http://localhost:7071/api/api');
  characters
  .then (data => data.json()) 
  .then (data => {
    id= data.clientId;
    scope = data.loginScope;
    console.log(id,scope)
  })
  .catch((error) => {
     console.error(error)
  })// state is "fulfilled" or "rejected"

export const msalConfig = {
  auth: {

    clientId: id, //I'm getting error here 
    authority:
      "https://login.microsoftonline.com/<my_tenant_id>", //production environment
    redirectUri: "http://localhost:8000",
    postLogoutRedirectUri: "/",
  },
  cache: {
    cacheLocation: "localStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  },
}

// Add scopes here for ID token to be used at Microsoft identity platform endpoints.
export const loginRequest = {
  // scopes: [fetch("http://localhost:7071/api/api").then((data) => data.json().then((data) => data.loginScope))]
  scopes: [scope]
}

// Add the endpoints here for Microsoft Graph API services you'd like to use.

export const graphConfig = {
  graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
  graphMeProfilePhoto: "https://graph.microsoft.com/v1.0/me/photo/$value",
}