我是nextJs的新手，我尝试用下面的代码创建一个带有悬停效果的菜单：

import Link from 'next/link';

const MenuItem = ({ href, label }) => (
  //This Link has a className that doesn't get styled.
  <Link href={href} className="menu-item">
    {label}
  </Link>
);

function MainNavigation() {

  return (
    <>
      <style jsx>{`
      .header {      
        height: 5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        padding: 0 10%;
        font-family: system-ui, sans;
        font-size: 2.5rem;
        font-weight: 800;
      }

      .logo {
        font-size: 2rem;
        color: white;
        font-weight: bold;
      }

      .header ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: baseline;
      }

      .header li {
        margin-left: 3rem;
      }
      
      .menu-item {
        color: #000;
        position: relative;
        text-decoration: none;
      }

      .menu-item::before {
        background: hsl(45 100% 70%);
        content: "";
        inset: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s ease-in-out;
        z-index: -1;
      }
  
      .menu-item:hover::before {
        transform: scaleX(1);
        transform-origin: left;
      }
    `}</style>

      <header className='header'>
        <div className='logo'>React Meetups</div>
        <nav>
          <ul>
            <li>
              <MenuItem href='/' label='menu item 1' />            
            </li>
            <li>
              <MenuItem href='/' label='menu item 2' />
            </li>
          </ul>
        </nav>
      </header>
    </>
  );
}

export default MainNavigation;

根据nextJs13的文档，我们不需要再把标签放在链接中，但是我想知道我怎么能在菜单项上做悬停效果？目前这个样式还没有应用到我的菜单项上。
有人能解释一下这段代码有什么问题吗？
谢啦，谢啦