How to pass data on expandable rows on react-data-table-component library

Hello good people on the internet, I am using the react-data-table-component library to display a table with expandeble rows.This is my implementatiion

<DataTable
  title="Movie List"
  columns={columns}
  data={completedProducts}
  expandableRows
  expandableRowsComponent={ExpandedComponent(expandproducts)}
  // expandOnRowClicked={expandOnRowClicked}
  // expandOnRowDoubleClicked={expandOnRowDoubleClicked}
  // expandableRowsHideExpander={expandableRowsHideExpander}
  pagination
/>

expandproducts is the data i want to be displayed on expanding

This is my ExpandedComponent

const ExpandedComponent =
(supdata) =>
({ data }) => {
  return (
    <div>
      {supdata}
    </div>
  );
};

so the rows and columns work well, My issue is how to pass the data to be displayed after the row is expanded.The data i want to be displayed on expansion has the following format:

    0: (2) [{…}, {…}]
    1: [{…}]
    2: (3) [{…}, {…}, {…}]
    3: (3) [{…}, {…}, {…}]
    4: (3) [{…}, {…}, {…}]
    5: (2) [{…}, {…}]
    6: [{…}]
    7: [{…}]
    8: [{…}]
    9: (2) [{…}, {…}]
    10: [{…}]

The objects contain something like this

    {name: 'Tusker', quantity: 9},
    {name: 'Guiness', quantity: 4}

if i try to expand the row an error is displayed saying

Uncaught Error: Objects are not valid as a React child (found: object with keys {name, 
quantity}). If you meant to render a collection of children, use an array instead

How do i go about this ps. This is the closest library i have got so far to do what i want. Any help is appreciated