我是学习 React 和 Tailwind 的新手。我有一个 Navbar 组件，我编写如下，
const Navbar = () => {
const [showModal, setShowModal] = useState(false);
return (
<>
<nav className="flex justify-between items-center h-16 bg-white text-black relative shadow-md font-quicksand">
<Link to='/' className='pl-8'>Project</Link>
<div className="px-4 cursor-pointer md:hidden">
{/* <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg> */}
<button
type="button"
className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
id="main-menu"
aria-haspopup="true"
onClick={() => setShowModal(true)}
>
<span className="sr-only">Open main menu</span>
<svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div className="pr-8 md:block hidden">
<Link to='/' className='p-4 font-bold'>Home</Link>
<Link to='/menu' className='p-4 font-bold'>Menu</Link>
<Link to='/about' className='p-4 font-bold'>About</Link>
<Link to='/contact' className='p-4 font-bold'>Contact</Link>
<Link to='/login' className="p-4 font-bold text-indigo-600 hover:text-indigo-500" role="menuitem">Log in</Link>
<Link to='/register' className="p-4 font-bold text-indigo-600 hover:text-indigo-500" role="menuitem">Register</Link>
</div>
</nav>
{showModal ? (
<div className="absolute top-0 inset-x-0 p-2 transition duration-500 ease-in-out transform origin-top-right md:hidden">
<div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="px-5 pt-4 flex items-center justify-between">
<div className="-mr-2">
<button
type="button"
className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
onClick={() => setShowModal(false)}
>
<span className="sr-only">Close main menu</span>
<svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
<div className="px-2 pt-2 pb-3 space-y-1" role="none">
<Link to='/' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Home</Link>
<Link to='/menu' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Menu</Link>
<Link to='/about' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">About</Link>
<Link to='/contact' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Contact</Link>
</div>
<div role="none">
<Link to='/login' className="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100" role="menuitem">
Log in
</Link>
</div>
<div role="none">
<Link to='/register' className="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100" role="menuitem">
Register
</Link>
</div>
</div>
</div>
</div>
) : null}
</>
)
}
正如你所看到的，当屏幕变小时，汉堡菜单按钮会出现，当我点击那个按钮时，它会打开一个包含所有标题组件的模式（模式代码从 Tailwind 官方组件 Hero 组件中复制）。
问题是当该模态出现顺风过渡动画时应该发生但它不起作用。我在这里做错了什么？我是否必须以某种方式使用 react 钩子 useEffect 来完成这项工作？？
任何形式的答案将不胜感激。