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

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>