How to change a css property for a nested list item in react.js material ui on hover?

Question

I have a react react app with material ui. I want a secondary icon for the list item to be visible only when the list item is being hovered over.

Here is my style object:

const useStyles = makeStyles((theme) => ({
    deleteButton:{
    visibility: 'hidden'
  },
  clientItem:{
    '&:hover': {
      '& .deleteButton': {
        visibility: 'visible'
      },
   },
}));

This is how my list is rendered from within my class:

return(
    <List dense >
       {data.map((elem) => {
           return (
               <ListItem key={elem.name} className={classes.clientItem} button>
                  <ListItemText id={elem.name} primary={elem.name}/>
                  <ListItemSecondaryAction>
                    <IconButton edge="end" className={classes.deleteButton} aria-label="delete">
                        <DeleteIcon />
                     </IconButton> 
                   </ListItemSecondaryAction>
               </ListItem>
            )
       })}
  </List>
)

This is the current output:

The highlighted item does not show the desired delete icon.

How do I get the delete icon to display on hover?

This is a screenshot of the list with all delete icon visible:

How do I get the delete icon to display only on hover?