How to solve the problem of closing animation of React drawer component of Tailwind CSS-PHP Chinese Network Q&A

In my React project, I also used tailwind CSS, and I implemented the function of opening the drawer after clicking the icon in the menu.

The problem is that in my implementation the closing animation is lost (the opening animation remains normal).

Let’s take a look at this component:

import React, { useState } from 'react'; import {Link} from "react-router-dom"; import {PlusCircleIcon} from "@heroicons/react/24/solid"; import AddRecordTabs from "../record/AddRecordTabs"; import {Drawer} from "@material-tailwind/react"; const Menu = () => { const [open, setOpen] = React.useState(false); const openDrawer = () => { setOpen(true); }; const closeDrawer = () => { setOpen(false); }; React.useEffect(() => { if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } }, [open]); return (       
 
 {open && ( <>  { closeDrawer(); } }>
   closeDrawer()} size={window.innerHeight * 0.9} className="pt-2 bg-green-50 border-t-1 border-green-900 rounded-t-[10px]" >    
 
  
  )} 
 ); } export default Menu;

We don't need to worry about the AddRecordsTabs component and the value passed, since it's basically just passing the functionality to close the drawer.

What did I do wrong? What's wrong?