Menu sem formatação

Seguindo as aulas, fiz a cópia do CSS mas fica desse jeito:

Código em Menu.module.scss:

@import "styles/variaveis";
@import "styles/breakpoints";

.menu {
  display: flex;
  padding: 20px $padding-horizontal;
  @media (max-width: $desktop_xsm) {
    padding: 20px $padding-horizontal-mobile;
  }
  @media (min-width: $desktop_xsm) and (max-width: $desktop_sm) {
    padding: 20px $padding-horizontal-sm;
  }
  @media (min-width: $desktop_sm) and (max-width: $desktop_md) {
    padding: 20px $padding-horizontal-md;
  }
  &__list {
    align-items: center;
    display: flex;
  }
  &__link {
    list-style-type: none;
    padding: 0 20px;
    a {
      color: $dark;
      cursor: pointer;
      font-size: 24px;
      font-weight: 600;
      text-decoration: none;
      transition: .2s ease;
      &:hover {
        color: $dark-grey;
      }
    }
  }
}

Código em index.tsx de components/Menu:

import { ReactComponent as Logo } from 'assets/logo.svg';
import styles from './Menu.module.scss';
import { Link } from 'react-router-dom';

export default function Menu() {
  const rotas = [{
    label: 'Início',
    to: '/'
  }, {
    label: 'Cardápio',
    to: '/cardapio'
  }, {
    label: 'Sobre',
    to: '/sobre'
  }];

  return (
    <nav className={styles.menu}>
      <Logo />
      <ul className={styles.menu__list}>
        {rotas.map((rota, index) => (
          <li key={index}>
            <Link to={rota.to} className={styles.menu__link}>
              {rota.label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}

Não consigo ver onde estou errando.