How to difference two fields in react?

Good afternon,

I am doing a datagrid using the MUI datagrid and following the MUI Guide. And now I am stuck in a problem which I have put two fields with the same name because I need two columns (one for the date and the other one for the name), and when I render then only one column appears. I guess that's because there cannot be two fields with the same name. I try to find other methods, however I cannot see how.

  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,
    },
  ];

As you can see there are two columns with the field "details" I want them both in different columns. But I don't know how to do it.

JSON of the data

Thank you