Estoy creando un DataGrid donde quiero mostrar los valores de ready_by y el name que puedes ver en esta imagen:

En el código lo he configurado de esta forma: (enfócate en los dos últimos)

 const columns = [ { field: 'id', headerName: "ID", minWidth: 50, type:"number", align:'left', hide:'true' }, { field: 'customer', headerName: 'Customer', valueGetter: ({ value }) => value.email, width: 250, }, { field: 'paid', headerName: 'Customer has paid?', width: 250, }, { field: 'total', headerName: 'Cost', width: 150, }, { field: 'details', headerName: 'Ready By', type: 'datetime', valueGetter: ({ value }) => value.ready_by && new Date(value.ready_by), width: 250, }, { field: 'details', headerName: 'Name', valueGetter: ({ value }) => value[0].name, width: 250, }, ];

El problema es que cuando renderizo la página solo aparece uno de ellos y eso es porque repito el valor del field . Así que quiero preguntarte cómo resolver esto: