How to use Async Await inside template literal

Question

The below code just returns string literal. I read somewhere that Async-Await inside template string needs to have top-level await but how can I get top-level await in my case?

import { Autocomplete, TextField } from "@mui/material";
import usePlacesAutocomplete, {getGeocode, getZipCode} from "use-places-autocomplete";


const Places = () => { 
<Autocomplete        
   renderOption={(props, option) => 
     <li {...props}> 
        {`${ async () => await getGeocode({placeId: option.place_id})
                                .then(results => getZipCode(results[0], true))()}
        `}
        </li> }
      />
}    

Answer 1

I think You should extract the async request from the string literal

May Be Create a new Component called Option which takes args needed for api calls as Props and do the api call inside useEffect