How to get z-index to apply itself on heroimg and burgermenu

Question

Am facing an issue where until now I've had to apply -z-10 (negative 10 z-index) to my HeroIMG container so that it wouldn't overlap my burger menu in mobile view.

I have tried applying a higher z-index to the burgermenu but it doesn't do anything, nor does having the heroIMG container at z-index-0.

Burgermenu.tsx

const BurgerMenu = () => {
  const [toggleMenu, setToggleMenu] = useState(false);

  return (
    <nav className="md:hidden bg-opacity-20 border-gray-200 px-2 sm:px-4 py-2.5 rounded ">
      {/* BURGER MENU START HERE */}
      <div className="flex relative">
        {toggleMenu ? (
          <AiOutlineClose
            className="text-white md:hidden cursor-pointer"
            fontSize={28}
            onClick={() => setToggleMenu(false)}
          />
        ) : (
          <HiMenuAlt4
            fontSize={28}
            className="text-white md:hidden cursor-pointer"
            onClick={() => setToggleMenu(true)}
          />
        )}
        {toggleMenu && (
          <ul
            className="z-20 fixed top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl md:hidden list-none
          flex flex-col justify-start item-end rounded-md bg-gray-900 text-white animate-slide-in"
          >
            <Link href="/">
              <li className="cursor-pointer alegreya-bold uppercase my-2 mr-4 text-2xl drop-shadow-md hover:font-semibold">
                home
              </li>
            </Link>
            <Link href="/game">
              <li className="cursor-pointer alegreya-bold uppercase mb-2 mr-4 text-2xl drop-shadow-md hover:font-semibold">
                game
              </li>
            </Link>
            <Link href="/rules">
              <li className="cursor-pointer alegreya-bold uppercase mb-4 mr-4 text-2xl drop-shadow-md hover:font-semibold">
                game rules
              </li>
            </Link>

            <AiOutlineClose
              className="text-white text-extrabold md:hidden cursor-pointer"
              fontSize={32}
              onClick={() => setToggleMenu(false)}
              aria-label="close menu"
            />
          </ul>
        )}
      </div>
    </nav>
  );
};

HeroIMG + container

import heroIMG from "../public/banner.jpg";

const IndexPage = () => (
  <Layout title="Home | Legends of Uzarn">
    <h1 className="text-center font-bold text-white py-2">
      <span className="alegreya-bold capitalize">w</span>elcome to our new
      website!👋
    </h1>
    <div className="z-0">
      <div className="p-12 z-0 text-center relative overflow-hidden h-jumbatron400 bg-no-repeat bg-cover rounded-lg">
        <Image
          src={heroIMG}
          alt="Picture of the author"
          width={1280}
          height={400}
          layout="fill"
          // blurDataURL="data:..." automatically provided
          placeholder="blur" // Optional blur-up while loading
        />
        <div className="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black bg-opacity-60">
          <div className="flex justify-center items-center h-full">
            <div className="text-white">
              <h2 className="fenris text-5xl font-bold mt-0 mb-6 drop-shadow-xl">
                
              </h2>
              <h4 className="alegreya-regular text-3xl font-bold mb-8 drop-shadow-xl">
                aaaaa{" "}
                <span className="text-gradient alegreya-xtrabold box-shadow-md">
                  aaaa
                </span>{" "}
               aaaa
              </h4>
              <button role="button" className="mx-0 cursor-pointer">
                <img
                  src="/jumboCTA.png"
                  alt="call to action button that takes you to the game login"
                  className="cursor-pointer"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Features />
  </Layout>
);

Open to any suggestions.