I am creating a DataGrid where I want to show the values of ready_by and name that you can see in this picture:

In the code, I have configured it in this way: (focus on the last two)

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

The problem is that when I render the page only one of them shows up and that's because I repeat the field value. So I want to ask you how to resolve this: