How can I use show component inside a ListItemText?

Question

I used the ListItemText to display the list and my goal is to use the show component in the react-admin when each row of the list is clicked, but the function related to the display is not executed? How should it be done?

Contacts.js

/// --- List ---
export const ContactList = (props) => {
  const classes = useStyles();
  return (
    <List className={classes.list} {...props} pagination={false} exporter={false} filters={<ContactFilter/>}>
      <ContactSimpleList/>
    </List>
  )
};

/// --- Child list ---
const ContactSimpleList = () => {
  const {ids, data} = useListContext();

  const handleClick = (id) => {
    ShowContact(id);
  }
  return (
    <>
      {ids.map(id => (
        <ListItem key={id} button>
          <ListItemAvatar>
            <Avatar alt="Profile Picture" src={data[id].person}/>
          </ListItemAvatar>
          <ListItemText primary={data[id].name} onClick={() => handleClick(id)}/>
        </ListItem>
      ))}
    </>
  );
}

/// --- Show ---
export const ShowContact = (props) => (
  <Show {...props} actions={<ShowActionsOnTopToolbar/>} title={<ContactTitle/>}>
    <SimpleShowLayout>
      <TextField source="id"/>
      <TextField source="name"/>
      <TextField source="numbers.number" label="Number"/>
      <TextField source="numbers.type" label="Type Call"/>
    </SimpleShowLayout>
  </Show>
);

Answer 1

This is what you need to do; replace Typography with your component

<ListItemText
  disableTypography
  primary={
    <Typography>WaveRD</Typography>
  }
/>