Combine $.when and async/await in Javascript

In my lagacy code, I'm using jQuery's $.when().then() pattern. Inside the when, two web calls run in parallel. In the first of them, I now need to access some additional data beforehand. I basically tried to achieve that by making the done handler async and await that web call. Here's a simplified example:

$.when(
  firstCall().done(async function(outerData) {
    let innerData = await anotherWebCall();

    doSomeOtherStuff(outerData, innerData);

    console.log('first call finished');
  }),  
  secondCall().done(() => doSomethingElse())
).then(function() {
  console.log('everything finished');
});

I expect, that I would first see "first call finished" and then "everything finished" in the console. However, it's the other way around. How can I fix that?

I found the following workaround. I still don't consider this to be an optimal solution.

const firstCallFinished = $.Deferred();

$.when(
  firstCallFinished,
  firstCall().done(async function(outerData) {
    let innerData = await anotherWebCall();

    doSomeOtherStuff(outerData, innerData);

    console.log('first call finished');
    firstCallFinished.resolve();
  }),  
  secondCall().done(() => doSomethingElse())
).then(function() {
  console.log('everything finished');
});