Serenity js:add explicit wait in protractor

Question

In my serenity js application I m trying to add explicit wait using the browser.wait in the protractor

import { BrowseTheWeb, Click, Target } from '@serenity-js/protractor';
import { by } from "protractor";
import { protractor, element,browser } from 'protractor';


const EC = protractor.ExpectedConditions;
export class LoginActions {


    static ClickOn(locator: any,title:string): any {

       
        //Click.on comes from serenity
         return browser.wait(EC.presenceOf(element(locator)), 5000)

        .then(function(){
            return Click.on(Target.the(title).located(locator));
        }).catch(err=>{
            console.log('error in',JSON.stringify(err))
        });
    }

}

In my actions, i m trying to use the ClickOn function from the above helper (which is adding an explicit wait in the browser).

import { LoginActions } from '../ui/login_actions';

When('he/she/they enter(s) credentials and login', {timeout: 10 * 5000},() =>
    actorInTheSpotlight().attemptsTo(
        Log.the('Current page after login select', Website.title(), Website.url()),
        //override the sernity click and add a wait in browser 
        LoginActions.ClickOn(by.css('[name="selectedIdPUrl"]'),'dropdown'),
        LoginActions.ClickOn(by.id('nx-dropdown-item-1'),'cognito'),
        LoginActions.ClickOn(by.css('[type="submit"]'),'submit'),
));

While executing i m getting the following error

 [object Promise]
      ✗ TypeError: this.activity.performAs is not a function

Not sure how do i debug this error , can somebody give an insight??