I am facing an issue with a table inside a table card where the TableCell is overflowing horizontally when the word is too long. How can I break it to the next line? Please refer to the "code" section for details.
For more information, please visit my codesandbox HERE
<TableBody>
<TableRow>
<TableCell variant="head">Date</TableCell>
<TableCell variant="body">{order.date}</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Code</TableCell>
<TableCell variant="body">{order.code}</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Time</TableCell>
<TableCell variant="body">{order.time}</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Product</TableCell>
<TableCell variant="body">{order.product}</TableCell>
</TableRow>
</TableBody>