Error: function uses multiple asynchronous interfaces: callback and promise

Hello Everyone, I have a case where I am unable to use async in the step definitions. I have a simple scenario where in am logging in through the api interface of my application to fetch auth token My feature file is:

Feature: Login
  Scenario: Login using api
    Given I login to my account with my username and password
    Then I should get an authorization token
      |username|password|
      |xyz@email.com|dev|

my steps are :

defineSupportCode(({ Given, Then, setDefaultTimeout }) => {
  const timeOut = 30000;
  const baseSteps: BaseSteps = new BaseSteps();
  setDefaultTimeout(timeOut);

  // tslint:disable-next-line:only-arrow-functions
  Given(/^I login to my account with my username and password$/, async (table: TableDefinition) => {
   const userData = table.hashes();

    const loginResponse =  await baseSteps.loginUser(userData[0].username, userData[0].password);


    console.log('Login response is ', loginResponse);
    const statusCode = 302;

    expect(await loginResponse.status).to.equal(statusCode);
  });

   Then(/^I should get an authorization token$/, async () => {
    const authorizationHeader = await baseSteps.getAuthorizationHeader();
    console.log('Auth Header', authorizationHeader);
    expect(authorizationHeader).to.not.equal(null);

    const orders = await fetch('url',
      {
        method: 'GET', headers: {
          authorization: authorizationHeader
        }
      });

    // tslint:disable-next-line:no-console
    console.log(await orders.json());
  });
});

And my helper functions in the BaseSteps.ts are as follows:

 async loginUser(userName: string, password: string): Promise<Response> {
    const getSignInFormResponse = await fetch(this.getInitialRequestUrl(),
      {
        method: 'GET'
      });

    const form = <some-form-data>;

    const loginResponse = await fetch(getSignInFormResponse.url,
      {
        method: 'POST',
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        body: form,
        redirect: 'manual'
      });

      return loginResponse;
  }

async getAuthorizationHeader() {
    const tokenResponse = await fetch(this.getInitialRequestUrl(),
      {
        method: 'GET',
        redirect: 'manual'
      });

    const tokenInfo = qs.parse(tokenResponse.headers.get('location'));
    const authorizationHeader = `${tokenInfo.token_type} ${tokenInfo.access_token}`;

    return authorizationHeader;
  }

When i run my scenario it fails with the following error:

Error: function uses multiple asynchronous interfaces: callback and promise

on the line where my Given starts

Please help me fix this error.