IconButton from MUI no longer changes hover color with makeStyles?

From https://mui.com/guides/migration-v4/#style-library:

The style library used by default in v5 is emotion. While migrating from JSS to emotion, and if you are using JSS style overrides for your components (for example overrides created by makeStyles), you will need to take care of the CSS injection order. To do so, you need to have the StyledEngineProvider with the injectFirst option at the top of your component tree.

If I change your index.js to the following, the style overrides work:

import { StyledEngineProvider } from "@mui/material/styles";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <App />
  </StyledEngineProvider>,
  rootElement
);

In addition to adding <StyledEngineProvider injectFirst>, I also removed StrictMode since makeStyles doesn't support it -- styles generated by makeStyles will not get maintained in the DOM reliably in strict mode.

Since you're using v5, the better option would be to avoid makeStyles (which is deprecated in v5) entirely and use styled instead. Then you don't need the index.js changes and can keep strict mode.

import React from "react";
import { styled } from "@mui/material/styles";
import IconButton from "@mui/material/IconButton";

const StyledIconButton = styled(IconButton)(`
  &:hover, &.Mui-focusVisible {
    background-color: yellow;
  }
`);

You should add !important to your style then it should work

const useStyles = makeStyles((theme) => ({
  customHoverFocus: {
    "&:hover, &.MuiIconButton": { background: "yellow !important" }
  }
}));