Before we can upgrade MUI to v6 and above, we need to finish changed over our style from makeStyles to the new Styled.

If you search Styled you should find many examples already done.

This ticket should be relatively straight-forward though it will be a lot of changes. Feel free to do PRs in sections, as it makes it easier to test, i.e. do a group of 10 components in 1 PR, open it. Do another PR with another 10.

** Make sure to import styled from @mui/material (it comes up from other packages in the suggestions).**

Please name the new styled components starting with Styled, i.e. StyledAlert, StyledCollapse, etc..

Here is the migration from JSS guide from MUI if it helps:
https://mui.com/material-ui/migration/migrating-from-jss/

Old way:

const useStyles = makeStyles((theme) => ({
  root: {
    marginBottom: theme.spacing(2),
  },
}));

New way:

import { theme } from "theme";

const StyledAlert = styled("div", {
    marginBottom: theme.spacing(2),
});