当我单击切换按钮时，如何将过渡添加到react中的导航栏菜单

.menu-item {
  transition: width 0.3s ease, background-color 0.3s ease;
}

import React, { useState } from 'react';

function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <nav>
      <button onClick={toggleMenu}>切换菜单</button>
      <ul className={isMenuOpen ? 'menu-open' : 'menu-closed'}>
        <li className="menu-item">菜单项1</li>
        <li className="menu-item">菜单项2</li>
        <li className="menu-item">菜单项3</li>
      </ul>
    </nav>
  );
}

export default Navbar;

.menu-open .menu-item {
  width: 200px;
  background-color: #f0f0f0;
}

.menu-closed .menu-item {
  width: 0;
  background-color: transparent;
}