How do I convert Promise<string> object to string for use in href?

Question

I had this link in a .tsx file:

<a href="https://www.example.com/foo/bar" target="_blank">

I now need to change this to call a service which will return a page.

I updated my href to his:

<a href={this.myService.getMyCert(policy)} target="_blank">

Now I get this error on the href:

(property) React.AnchorHTMLAttributes.href?: string | undefined Type 'Promise' is not assignable to type 'string'.ts(2322) index.d.ts(2007, 9): The expected type comes from property 'href' which is declared here on type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>'

This is what gets called:

getCertURL(pol: string): Promise<string> {
  return ApiService.getData(this.polApiUrl + pol).then(
    (response) => response.data.certURL
  );
}

async getMyCert(pol: string): Promise<string> {
    return ApiService.getData(await this.getCertURL(pol)).then(
      (response) => response.data.certURL
    );
}

In this I'm using async/await and .then() so I thought it should resolve but it seems that I'm returning a Promise<string> instead of a string which href doesn't like. I guess I need to convert it to string in some way. How do I resolve this?