Mostrar iconos usando CSS con hover anidados en MaterialUI

En un escenario de uso de MUI en el cual tenemos un Box y dentro una imagen que queremos que se muestre únicamente cuando se pasa el ratón por encima del Box principal (tipo filas) se pueden anidar el cambio de estilos con CSS:

      <Box
        sx={{
          backgroundColor: "#fff",
          border: "1px solid #ccc",
          margin: "0px 0px 8px 0px",
          padding: "10px 10px",
          "&:hover": {
            backgroundColor: "#f2f2f2",
            "& .editIcon": {
              visibility: "visible",
            },
          },
          position: "relative",
          //display: "inline-block",
        }}
      >

Enlace a codesandbox.io: https://codesandbox.io/s/show-icon-on-hover-z25pri