const Row  = [
        {
            name: "jad",
            link :"/jad",
            calories :"52",
            Fat :"4",
            Carbs :"5",
            Protein :"41"
        },
        {
            name: "john",
            link :"/john",
            calories :"82",
            Fat :"42",
            Carbs: "35",
            Protein :"1"
        }
] 

const [myList, setMyList] =  React.useState(Row);
function handle(){
  setMyList()
}
<TableBody>
        {
            myList.map((item)=> {
              return (
                <TableRow>
                    <TableCell><Link href={item.link}>{item.name}</Link></TableCell>
                    <TableCell align="right">{item.calories}</TableCell>
                    <TableCell align="right">{item.Fat}</TableCell>
                    <TableCell align="right">{item.Carbs}</TableCell>
                    <TableCell align="right">{item.Protein}</TableCell>
                     <TableCell align="right"><Button variant="contained">Edit</Button><Button variant="outlined" startIcon={<DeleteIcon />}>
  Delete</Button></TableCell>
                </TableRow>
              )
            })
        }
        </TableBody>