How expected condition 'isClickable' works in Protractor

I am trying to click a button as defined below:

<button _ngcontent-xjt-c6="" class="ef-ui-btn-inline-sm ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" icon="pi pi-chevron-right" id="select-file-button" pbutton="" type="button" ng-reflect-icon="pi pi-chevron-right">
  <span aria-hidden="true" class="ui-button-icon-left ui-clickable pi pi-chevron-right"></span>
  <span class="ui-button-text ui-clickable">ui-btn</span>
</button>

If I try just click, everything works fine. The button gets clicked:

element.click();

I am getting an element not clickable exception when using the code below though:

let condition = await EC.elementToBeClickable(element);
console.log(condition)
await browser.wait(condition, 5000, "Not available for click within 5sec");
await element.click();

Could someone explain why the expected condition is not able to tell that the element is clickable?

const EC = protractor.ExpectedConditions;
let condition = await browser.wait(EC.elementToBeClickable(element), 5000, "Not available for click within 5sec");
console.log(condition)
await element.click();