TailwindCSS fade in Element on click

Question

So I'm making this app and I need to fade in the menu when I click the button. I have it rendering on click using state, but I can't get it to fade in / fade out on click. When I edit the opacity value inside Chrome Dev Console the transition works fine, but when I want to change it using state it doesn't.

Any help? Thanks in advance!

import React, { useState } from "react";
import { useRouter } from "next/router";
import { MenuIcon, XIcon } from "@heroicons/react/outline";

function Header() {
  const router = useRouter();

  const [popCard, setPopCard] = useState("hidden");
  const [fade, setFade] = useState(true);

  const handleMenuClick = () => {
    setPopCard("inline-block");
    setFade(true);
  };

  const handleXClick = () => {
    setPopCard("hidden");
    setFade(false);
  };

  return (
    <div className="text-center">
      <header className="sticky z-50 top-0  shadow-md bg-white border-b p-5">
        <div className="flex justify-between items-center">
          <h1
            className="text-6xl text-red-500 cursor-pointer"
            onClick={() => router.push("/")}
          >
            Velvet
          </h1>
          <MenuIcon
            className="h-8 text-red-500 cursor-pointer"
            onClick={handleMenuClick}
          />
        </div>
      </header>

      <div
        className={
          popCard +
          " w-[60%] flex-col border my-10 pb-3 rounded-3xl shadow-lg transition duration-300 ease-in-out " +
          `${fade === true ? "opacity-100" : "opacity-0"}`
        }
      >
        <div className="flex justify-end">
          <XIcon
            className="h-6 text-red-500 cursor-pointer mt-2 mr-2 opacity-70"
            onClick={handleXClick}
          />
        </div>
        <div className="space-y-8 text-3xl text-center mt-5 mb-10 text-red-500">
          <h1>Contac</h1>
          <h1>About Us</h1>
        </div>
      </div>
    </div>
  );
}

export default Header;

codesandbox: Sandbox

Just to be clear, I want the menu card to fade in when I click the menu button, and I want the menu card to fade out when I click the close button.