Repository: material-ui
Issue: Codemod jss-to-styled doesn't delete makeStyles call
Labels: bug 🐛,package: codemod

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Steps to reproduce 🕹

Steps:

1. Start with the file shown below
2. Run `npx @mui/codemod v5.0.0/jss-to-styled dialog.js`
3. Observe the output

Starting file: 

```javascript
import React from 'react'
import MuiDialog from '@mui/material/Dialog'
import makeStyles from '@mui/styles/makeStyles'

const useDialogStyles = makeStyles((theme) => ({
  dialogPaper: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  },
}))

export function Dialog({
  open,
  onClose,
  children,
  maxWidth = '600px',
  ...props
}) {
  const classes = useDialogStyles({ maxWidth })

  return (
    <MuiDialog
      open={open}
      scroll={'body'}
      onClose={onClose}
      classes={{ paperScrollBody: classes.dialogPaper }}
      style={{ display: 'block' }}
      {...props}
    >
      {children}
    </MuiDialog>
  )
}

```

### Current behavior 😯

This file gets generated: 

```javascript
import React from 'react'
import { styled } from '@mui/material/styles';
import MuiDialog from '@mui/material/Dialog'
const PREFIX = 'dialog';

const classes = {
  dialogPaper: `${PREFIX}-dialogPaper`
};

const StyledMuiDialog = styled(MuiDialog)((
  {
    theme
  }
) => ({
  [`& .${classes.dialogPaper}`]: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  }
}));

const useDialogStyles = makeStyles((
  {
    theme
  }
) => ({
  [`& .${classes.dialogPaper}`]: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  }
}))

export function Dialog({
  open,
  onClose,
  children,
  maxWidth = '600px',
  ...props
}) {
  const classes = useDialogStyles({ maxWidth })

  return (
    <StyledMuiDialog
      open={open}
      scroll={'body'}
      onClose={onClose}
      classes={{ paperScrollBody: classes.dialogPaper }}
      style={{ display: 'block' }}
      {...props}
    >
      {children}
    </StyledMuiDialog>
  );
}
```

### Expected behavior 🤔

The `makeStyles` call and `useDialogStyles` hook call shouldn't be there anymore. I'm expecting the file to be something like this: 

```javascript
import React from 'react'
import { styled } from '@mui/material/styles';
import MuiDialog from '@mui/material/Dialog'
const PREFIX = 'dialog';

const classes = {
  dialogPaper: `${PREFIX}-dialogPaper`
};

const StyledMuiDialog = styled(MuiDialog)((
  {
    theme
  }
) => ({
  [`& .${classes.dialogPaper}`]: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  }
}));

export function Dialog({
  open,
  onClose,
  children,
  maxWidth = '600px',
  ...props
}) {
  return (
    <StyledMuiDialog
      open={open}
      scroll={'body'}
      onClose={onClose}
      classes={{ paperScrollBody: classes.dialogPaper }}
      style={{ display: 'block' }}
      {...props}
    >
      {children}
    </StyledMuiDialog>
  );
}
```

### Context 🔦

I'm trying to migrate from material UI v4 to v5. Since this codemod is not producing working code, I'm not able to carry out this migration easily.  

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
I'm not able to run @mui/envinfo - it hangs and doesn't output anything or use any system resources.
```
</details>