Does the edit button display specific information of the currently selected element as a sub-element

{
        field: 'detail',
        headerName: '상세',
        align: 'left',
        headerAlign: 'left',
        minWidth: 150,
        sortable: false,
        display: 'flex',
        renderCell: function render({ row }) {
          return (
            <>
              <EditButton hideText recordItemId={row.id} />
              <ShowButton hideText recordItemId={row.id} />
              <DeleteButton hideText recordItemId={row.id} />
            </>
          );

{
        field: 'detail',
        headerName: '상세',
        align: 'left',
        headerAlign: 'left',
        minWidth: 150,
        sortable: false,
        display: 'flex',
        renderCell: function render({ row }) {
          return (
            <>
              <EditButton hideText recordItemId={row.id} />
              <ShowButton hideText recordItemId={row.id} />
              <DeleteButton hideText recordItemId={row.id} />
            </>
          );

export default function NatureClassEdit() {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
  const [selectedDetail, setSelectedDetail] = useState<any>(null);

export default function NatureClassEdit() {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
  const [selectedDetail, setSelectedDetail] = useState<any>(null);