Условный рендеринг не отображает мои данные должным образом

Question

У меня есть компонент для отображения данных в таблице Material-UI, который называется UserRow.

Этот компонент используется в другом компоненте, который называется users.

Но для правильного отображения данных в Единственное, что я нашел в каждом поле, - это создание условного рендеринга, чтобы я мог просто рендерить данные, которые мне нужны, в каждом поле, в противном случае они дублировались бы.

Есть ли способ просто вызвать один раз <UserRow/> компонента и получить те же результаты, что и на изображении ниже?

UserRow:

export default function UserRow( props, {name, details}) {

    const style = styles();

    function UserName(props) {
     const showUserRow = props.showUserRow;
     if (showUserRow) {
       return  <ListItem>
                 <ListItemIcon >
                   <PeopleIcon className={style.iconColor}/>
                 </ListItemIcon>
                 <ListItemText className={style.text}>{props.userRow}</ListItemText>
                 </ListItem>

     }
       return<div></div>;
   }


    function IconDetails(props) {
     const showDetailsRow = props.showDetailsRow;
     if (showDetailsRow) {
       return <Link to={`/users/${props.detailsRow}`}>
                <ListItemIcon >
                    <ListAltIcon className={style.iconColor}/>
                </ListItemIcon>
            </Link>;
     }
       return<div></div>;
   }

    return (
       <List>
           <ListItem>
             <UserName userRow={props.name} showUserRow={props.showUserRow}/>
             <IconDetails detailsRow={props.details} showDetailsRow={props.showDetailsRow}/>
           </ListItem>
       </List>
    )
}

пользователи:

export default function User({ data })  {

  const style = styles();


    const userList = data.map((row) => {
        return { name: row, details: row };
    });


    const [state] = React.useState({

      users: [
        ...userList,
      ]
    });


 return (
  <div>
    <MaterialTable
      icons={tableIcons}
      title={<h1 className={style.title}>Users</h1>}
      columns={[
        {
          title: "Name",
          field: "name",
          render: rowData => (
            <UserRow  showUserRow={true}  showDetailsRow={false} name={rowData.name}  />
          )
        },
        {
          title: "Details",
          field: "details",
          render: rowData => (
            <UserRow  showUserRow={false}  showDetailsRow={true} details={rowData.details}  />
          )
        },
      ]}
      data={state.users}
      options={{
        search: true
      }}
    />
  </div>
)
}

Что у меня было раньше:

UserRow:

export default function UserRow( props, {name, details}) {

const style = styles();

return (
  <List>
    <ListItem>
      <ListItemIcon >
        <PeopleIcon className={style.color}/>
      </ListItemIcon>
      <ListItemText className={style.text}>{name}</ListItemText>
      <Link to={`/users/${details}`}>
        <ListItemIcon >
         <ListAltIcon className={style.iconColor}/>
        </ListItemIcon>
      </Link>
    </ListItem>
  </List>
 )
}

пользователи:

return (
      <div>
        <MaterialTable
          icons={tableIcons}
          title={<h1 className={style.title}>Users</h1>}
          columns={[
            {
              title: "Name",
              field: "name",
              render: rowData => (
                <UserRow   name={rowData.name} details={rowData.details}  />
              )
            },
            {
              title: "Details",

            },
          ]}
          data={state.users}
          options={{
            search: true
          }}
        />
      </div>
    )
 }

Проблема здесь, в предыдущем решении, в том, что если мы создадим заголовок Details, таблица material-ui создаст div для деталей, и я не смогу разместить свою иконку там, и это было бы проблемой, если бы у меня было больше данных, и мне нужно поместить данные в соответствующие position.

То, чего я пытался достичь с помощью предыдущего решения, это сократить некоторый код, потому что, если у меня много полей, я буду повторять слишком много кода.

Ссылка, которая может быть полезна: https://material-table.com/# / документов / получить стартер