How do I resolve a promise when fetching a file using JS called from HTML?

My application is using ReactJS (Material library), AWS Amplify, AWS S3 and GraphQL. I’m trying to populate a table with Projects. Each Project row contains the name, an image and some other details. Project has a GraphQL schema s.t. it has an image variable. The image variable stores the unique key for finding the image associated with the project.

I’m able to populate each row using a mapping for project (i.e. project.name, project.var1, project.var2, …). However, I need to get a signed url for the image to display in the table and I’m having some issues with assigning the fetched url. I’m a begginer at Javascript, so I probably misunderstand what I’m actually doing.

When I run the code below, I don’t get any errors and it seems like fetchImage is being called for any of the projects that have image values. Upon inspecting the table the background image values are canceled out and say “Invalid property value” with the following value:

background image: url([Object Promise])

JavaScript code:

async function fetchImage(e) {
   const signedUrl = await Storage.get(e, {
   level: ""
   });
   console.log('env img: ', e);
   console.log('signed Url:', signedUrl);

   return signedUrl;
}

Return HTML:

<TableBody>
  {projects.map((project) => {
    return (
      <Fragment key={project.id}>
        <TableRow
          hover
          key={project.id}
        >
          <TableCell>
            <Box
              sx={{
                alignItems: 'center',
                display: 'flex'
              }}
            >                     
              {project.image
                ? (                            
                  <Box
                    sx={{
                      alignItems: 'center',
                      backgroundColor: 'background.default',
                      backgroundImage: `url(${fetchImage(project.image)})`,
                      backgroundPosition: 'center',
                      backgroundSize: 'cover',
                      borderRadius: 1,
                      display: 'flex',
                      height: 80,
                      justifyContent: 'center',
                      overflow: 'hidden',
                      width: 80
                    }}
                  />
                )
                : ( ...
                )}
            </Box>
          </TableCell>
        </TableRow>
      </Fragment>
    );
  })}
</TableBody>