How to perform XHR request in customBodyRender

Hello,

Based on row data that is passed into customBodyRender(), I need to be able to take an integer from a cell and perform an XHR request to return some data and append it to the component that I am rendering.

I tried using async / await but it does not seem to work.

## Expected Behavior
I should be able to make XHR request in customBodyRender and use data returned to append to object.

## Current Behavior
React throws following error:

Uncaught Invariant Violation: Objects are not valid as a React child (found: [object Promise])

## Code I am using

Code works as follows:

1. customBodyRender waits for data to return and checks to see if cell value === 'promoted'.
2. If it is, I check to see if another cell in the row is an integer.
3. If it is, I then call getPromotionInfo which returns me a value that I need to append to a window.open onclick event.

```
async getPromotionInfo(id) {
let json = axios.get('/some/enedpoint/${id}/event');
return json
}

customBodyRender: async (value, tableMeta, updateValue) => {
if (value === 'open') {
return (

{value}

)
}
if (value === 'closed') {
return (

{value}

)
}
if (value === 'promoted') {
if (Number.isInteger(tableMeta.rowData[0])) {
const result = await this.getPromotionInfo(tableMeta.rowData[0]);
if (result.data.records[0].id !== null) {
return (
Promoted
)
}
} else {
return ()
}
}
}
```

## Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | latest |
| MUI-datatables | latest |
| React | latest |
| browser | |
| etc | |