Tailwind transition max-height-fit won't work as intended - reactjs

Question

I found a great accordion solution on the internet and wanted to try it. The difference between the example and my code is I used max-height-fit instead of max-height-20.
Here is my code:
<div className="relative overflow-hidden">
<input
type="checkbox"
className="peer absolute top-0 inset-x-0 w-full h-12 opacity-0 z-10 cursor-pointer"
/>
<div className="bg-gray-500 h-12 w-full pl-5 flex items-center">
<h1 className="text-lg font-semibold text-white">Offline</h1>
</div>
<div className="absolute top-3 right-3 text-white transition-trasnform duration-500 rotate-0 peer-checked:rotate-180">
<FontAwesomeIcon icon={faChevronDown} />
</div>
<div className="overflow-auto transition-all duration-500 max-h-0 peer-checked:max-h-fit">
{players
.filter((p: any) => p.name.toLowerCase().includes(search))
.map((player: any) => {
return (
<div className="flex py-4 border-b-2 border-gray-700 hover:bg-gray-800/90 last:border-b-0">
<div className="ml-5 -mt-1 bg-gray-700 w-8 h-8 text-center leading-8 rounded-full">
{player.ID}
</div>
<div className="ml-5 flex grow">
<div className="w-full">
{player.name} ({player.level})
</div>
<div>
{player.isAdmin && (
<FontAwesomeIcon className="mr-5" icon={faCrown} />
)}
</div>
</div>
</div>
);
})}
</div>
</div>