How to display a custom component under a row when clicked in MUI Data-grid-pro react component?

I am trying to have a feature in a MUI DataGrid, if you click on a row, it expands with more info,

Here is what I have tried Demo But I can not customise this to have full width of the row and have more info.

Expecting something like below image

You need to use getDetailPanelContent prop of MUI datagrid like this:

// Custom component to display a message in place of the new row
const MessageComponent = ({ message }) => (
  <div
    style={{
      padding: '10px',
      background: 'lightblue',
      border: '1px solid #ccc',
    }}
  >
    {message}
  </div>
);

function DetailPanelContent({ row }) {
  return (
    <Stack direction="row" alignItems="center">
      <Box>slected-row-details</Box>
      <MessageComponent
        message={`Sected Row: ${row.firstName} ${row.lastName}, Age: ${row.age}`}
      />
    </Stack>
  );
}

export default function DataGridProDemo() {
  const [selectedRows, setSelectedRows] = React.useState([]);

  const handleRowClick = (params: any) => {
    setSelectedRows([params.row.id]);
  };

  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGridPro
        detailPanelExpandedRowIds={selectedRows}
        rows={rows}
        columns={columns}
        onRowClick={handleRowClick}
        pagination
        pageSize={5}
        disableSelectionOnClick
        getDetailPanelContent={({ row }) => <DetailPanelContent row={row} />}
        getDetailPanelHeight={() => 'auto'}
        sx={{
          '& div[data-field="__detail_panel_toggle__"]': {
            display: 'none',
          },
        }}
      />
    </Box>
  );
}

You can take a look at this forked StackBlitz for a live working example of your sample code using expandable rows.