How to access another element on hover in material ui?

Question

React

I want to rewrite the code from css to material ui makeStyles()
I tried this method but it doesn't work, how can I refer to another element on hover?
I will be grateful for the answer

.avatar:hover .changePhoto {
  display: block;
}

avatar: {
      '&:hover': {
        changePhoto: {
          display: 'block',
        },
      },
    },

Answer 1

avatar: {
  '&:hover': {
    '& $changePhoto': {
      display: 'block',
    },
  },
},
changePhoto: {},