Como exibir um componente personalizado em uma linha quando clicado no componente MUI Data-grid-pro react?

Você precisa usar getDetailPanelContentprop do datagrid MUI assim:

// 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>
  );
}

Você pode dar uma olhada neste StackBlitz bifurcado para obter um exemplo funcional ao vivo de seu código de amostra usando linhas expansíveis.