Global variable not updating as expected

I am building a small tool using AppScript. I can’t seem to get the global variable (URL) to update to include the docId.

What I expect

• Run the App function, which first creates a Google Doc and sets the global variable for the documentId (docId). Second it calls myOnClickhandler, which should take the global url variable that includes the updated docId.

What is happening:

• The variable ‘url’ in myClickHandler is not updated to the value of ‘docId’ set in the createProject function.

var docId = "";
var url = "https://docs.google.com/document/d/" + docId + "/";   
 

function doGet() {
      var output = HtmlService.createHtmlOutputFromFile('MyUI');
      return output;
    }

function createProject(test="test"){
  const doc = DocumentApp.create(test);
  docId = doc.getId();// <-- Update global docId variable. Doesn't seem to be working. 
  Logger.log("Doc ID is: " + docId);
}

function myOnClickHandler(){
  const myList = ["Hello from the server", url]
  Logger.log("URL is: " + url);
}

function app(){
  createProject();
  myOnClickHandler();
}

Probably a simple mistake on my part, but I am banging my head against the wall on this one. Screenshot attached..

Thank you!