Make a smoothly opening menu effect using Tailwind CSS and React JS - reactjs

Question

I want to transform the menu to have a smooth transition when it opens, but it's not working for me.
I've also tried using hidden class, but ran into the same problem.
Is there a way to make it open smoothly?
My attempt:
import React from "react";
export default function ModerSideMenu({}) {
const [menu, setMenu] = React.useState({
home: true,
});
return (
<div className="w-64 bg-blue-900 h-full p-4 text-white">
<div className="relative">
<div className="flex flex-row items-center justify-between uppercase font-semibold w-full">
<div className="ml-2 flex-row flex items-center space-x-2">
<i className="fas fa-home" />
<p className="">Home</p>
</div>
<i
className={`transform transition-all ease-out duration-300 select-none fas ${
menu.home ? "fa-angle-up" : "fa-angle-down"
} mr-2`}
onClick={() => setMenu({ ...menu, home: !menu.home })}
/>
</div>
<div
className={`ml-4 mt-2 space-y-1 text-sm transform transition-all ease-out duration-300 z-20 select-none ${
!menu.home ? "-translate-y-full" : "translate-y-0"
}`}
hidden={!menu.home}
>
<p>- Home 1</p>
<p>- Home 2</p>
</div>
</div>
<div className="relative mt-2">
<div className="flex flex-row items-center justify-between uppercase font-semibold w-full">
<div className="ml-2 flex-row flex items-center space-x-2">
<i className="fas fa-home" />
<p className="">Home 2</p>
</div>
<i className="justify-self-end fas fa-angle-down mr-2" />
</div>
<div className="ml-4 mt-2 space-y-1 text-sm">
<p>- Home 3</p>
<p>- Home 4</p>
</div>
</div>
</div>
);
}