Async function in another component returns promise when returned instead of data (react.js) [duplicate]

I have a function calling an api and I’m using that funciton inside of another component using useEffect and when I’m returning that data it’s coming in Promise state. How do I get only the data after it’s done fetching it from the api?

Code snippet – https://codesandbox.io/live/f895fd5c8f7