I'm trying to render an html element to render based on the return value of an async/await function. I can't seem to get it working correctly.

Below is the async function being called

```
const isAuthorized= async() => {
  const isAuthorized = await Promise.resolve().then(() => false);
  console.log("isAuthorized =", isAuthorized);
  return isAuthorized;
}

```

Below is the jsx:

```
const ComponentName= () => {
    return (
        <div>
            {Promise.resolve(isAuthorized()).then(res => {res ? <p>User is authorized</p> : <p>User is not authorized</p>})}
        </div>
    )
}

export default ComponentName;

```

This is the error I'm getting:

[![enter image description here](https://i.stack.imgur.com/yzJsC.png)](https://i.stack.imgur.com/yzJsC.png)