expandable rows with real API example

I'm trying to create a MUI table where I could show a typical one-to-many relationship using expandable rows for that. I receive data from API with this format - an array of objects for table data and an array of objects for expanded rows

`
[
    {
      "name": "Row 1",
      "status": "status1", 
      "description": "desc1,
      "applicants": [
        {
          "name": "expanded row 1",
          "id": "11091700",
        },
        {
          "name": "expanded row 2",
          "id": "1132323",
        }
      ]
    },
   {
      "name": "Row 2",
      "status": "status2", 
      "description": "desc2,
      "applicants": [
        {
          "name": "expanded row 1",
          "id": "44444",
        },
        {
          "name": "expanded row 2",
          "id": "55555",
        }
      ]
    },
]
`

Expected Behavior

I expected that I can simply map data for expanded rows from my API but looking at expended row example I don't understand how can I do it

Current Behavior

I built cadesandbox example where I created testData file like my API and I can use it as data for my table but I can't find a way how to use it for expanded rows... I was trying to use data.applicants.map() but got undefined "applicants" error

Steps to Reproduce (for bugs)

In ExpandedRows.js I'm trying to {data.applicants.map((applicantsRow) => ( applicantsRow.name ))} but got an undefined "applicants" error so I commended it and now can show only static data cadesandbox example

1. 2. 3. 4.

I hope I can find some advice for my problem here. anyway, I think a more realistic ExpandebleRow example would be nice. Nowadays all data comes from the API and it would be nice to have an example of how to work with it...

Your Environment

Tech	Version
Material-UI	5.2.2
MUI-datatables	4.0.0
React	17.0.2
browser
etc

okay,I can solve my issue In table options I just pass applicants from my data

renderExpandableRow: (rowData, rowMeta) => {
    const colSpan = rowData.length + 1;
    let index = rowMeta.dataIndex
    return (
      <ExpandedRows index={index} applicants={data[index].applicants}/>
    );
  },

and in the ExpandedRows component I just use it

{applicants.map((applicantsRow) => (
                <>
                    <TableRow key={applicantsRow.id}>
                        <TableCell component="th" scope="row" colSpan={2} align="center">{applicantsRow.name}</TableCell>
                        <TableCell align="center">{applicantsRow.status}</TableCell>
                        <TableCell align="center">{applicantsRow.license_id}</TableCell>
                        <TableCell align="center">{applicantsRow.experience}</TableCell>
                        <TableCell align="center">{applicantsRow.certification}</TableCell>
                        <TableCell align="center" colSpan={2}>{applicantsRow.education}</TableCell>
                    </TableRow>
                </>
            ))}

Anyway, I'd like to hear any advice on how you guys use expanded rows with real API, maybe we can improve the example for it...

gregnb / mui-datatables