CSS-in-JS от Material UI не работает должным образом совместно с Next.js

При разработки некоторого веб-интерфейса, возникла проблема: не получается наладить взаимодействие двух технологий: Material UI и Next.js. Использую готовые компоненты от Material создаю свою компоненту:

const SocialMedia = () => {
 const classes = useStyles();

  return (
    <List className={classes.example}>
      <ListItem>one</ListItem>
      <ListItem>two</ListItem>
      <ListItem>three</ListItem>
    </List>
  );
};

export default SocialMedia;

И пытаюсь ее стилизовать, используя makeStyles():

const useStyles = makeStyles((theme) => ({
  example: {
    background: "#fff",
    "& > *": {
      background: "black",
      marginRight: 10,
    },
  },
}));

В результате стили не применяются, когда эту компоненту использую в другой. Однако же если эту часть не делать отдельной компонентой, а вставить напрямую в родительскую компоненту (при этом перенести стили тоже), то все работает. Не могу понять с чем связано такое поведение.

Стоит упомянуть тот факт, что я добавлял в _app.js и _document.js код, представленный командой Material UI для использования его с Next.js, но ошибка в консоли о несоответствии классов на стороне сервера и клиента остается: скрин ошибки.

Помогите, пожалуйста, заранее спасибо!