How to fix error when rendering components in map?

Question

React

I wrote components for a table, and I'm trying to display in the map functions, but I get this error:

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

Code
// Data: [{id: 1, name: 'Product-1', price: 2,}, {id: 2, name: 'Product-2', price: 3}]

return (
    <Table>
      <TableHead columns={columns} />
      <TableBody>
        {data.map((item) => {
          return (
              <TableRow>
                <TableHeading scope="row">{item.id}</TableHeading>
                <TableCell>{item.name}</TableCell>
                <TableCell>{item.price}</TableCell>
              </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
};

Answer 1

found an error, it was not here at all. In the TableHeading component, I forgot to specify the {children} destructuring. Sorry.