Undefined Response from Asynchronous Callback on GIPHY API

Question

// //create the src for gif
function loadGiphyData(tag, callback){
  var data;
  var request = new XMLHttpRequest();
  request.open('GET', `https://api.giphy.com/v1/gifs/search?q=${tag}&api_key=5p8A1b1szDSqAVgDP1m2dlq8z0rdO3h1&limit=10`, true);
  request.onload = function() {
    data = JSON.parse(request.responseText).data[Math.floor(Math.random()*11)].images.original.url;
    console.log(data);
    return callback(data);
  }
  request.send();
}

Hi all, I am having issues with getting my callback function to return a value. I'm using the GIPHY API to return a URL of the GIF, but when I console.log() the return value I always get undefined.

console.log(loadGiphyData("dog", function(result) {return result;}));

I've read Felix Kling's answer to how async works and tried to implement his use of a callback function, but I still am not getting anything to return. -> How do I return the response from an asynchronous call?

Any help would be greatly appreciated, thank you!