Material UI: How to display my array of objects into a material ui table

Question

I have this interface and through this interface I display a set of values, and as it is clear, I have a “deduction” and the deduction is an array in which either one, two, three, or several values, and as it is clear from the table that most of the lines contain I have one Deduction value, but in the fourth line with the ID number eleven it contains two Deduction values, and as it is clear in this line that the interface’s shape has changed and become not beautiful, the question and the problem I have is how can I display the Deduction matrix in a better String (numbers behind each other with commas and without spaces) without the line becoming bad

   {n.deductions.map((deduction) => (
                      <TableCell
                        key={deduction.id}
                        className="p-4  md:p-16"
                        component="th"
                        scope="row"
                        align="center"
                      >
                        <span>£</span>
                        {deduction.amount}
                      </TableCell>
                    ))}

This is the deduction matrix, I take the quantity and display it

 "deductions": [
            {
                "id": 11,
                "receiptId": 11,
                "type": "loan",
                "amount": 7500,
                "reason": "You have took a holiday...",
                "createdAt": "2022-03-04T12:21:10.145Z",
                "updatedAt": "2022-03-04T12:21:10.145Z",
                "deletedAt": null
            },
            {
                "id": 12,
                "receiptId": 11,
                "type": "loan",
                "amount": 1000,
                "reason": "You have took a holiday...",
                "createdAt": "2022-03-04T12:21:10.145Z",
                "updatedAt": "2022-03-04T12:21:10.145Z",
                "deletedAt": null
            }
        ]

Answer 1

To render the array in this form : [7500, 1000] inside the table cell try this:-

<TableCell
                        key={deduction.id}
                        className="p-4  md:p-16"
                        component="th"
                        scope="row"
                        align="center"
                      >
                        <span>£</span>
                        {deduction.amount[0] + "," + deduction.amount[1] }
                      </TableCell>