Image overlapping navbar on Next.js with Tailwind

I have this problem where an image from a section overlaps when the Navbar dropdown in mobile is open. I've tried adding z-50 to the navbar but it wont make any difference.

What I'd like to happen is that when you open the dropdown menu from the navbar the image stays below

The image belongs with the orange background, below the black navbar

This is the code for the navbar:

import React from "react";
import Link from "next/link";
import { useState } from "react";

function MobileNav({ open, setOpen }: any) {
  return (
    <div
      className={`absolute z-50 top-0 h-fit pb-5 left-0 w-screen bg-black transform ${
        open ? "-translate-y-0" : "-translate-y-full"
      } transition-transform duration-300 ease-in-out filter drop-shadow-md`}
    >
      <div className="text-white font-vietnam text-2xl bg-growing-underline flex items-center justify-center filter drop-shadow-md h-20">
        <Link href="/">
          <a>MENU</a>
        </Link>
      </div>
      <div className="flex flex-col bg-black gap-7 pl-4">
        <Link href="/about">
          <a
            className=" text-white text-lg"
            onClick={() =>
              setTimeout(() => {
                setOpen(!open);
              }, 100)
            }
          >
            About
          </a>
        </Link>
        <Link href="/projects">
          <a
            className=" text-white text-lg"
            onClick={() =>
              setTimeout(() => {
                setOpen(!open);
              }, 100)
            }
          >
            Projects
          </a>
        </Link>
        <Link href="/resume">
          <a
            className=" text-white text-lg pb-3"
            onClick={() =>
              setTimeout(() => {
                setOpen(!open);
              }, 100)
            }
          >
            CV
          </a>
        </Link>
      </div>
    </div>
  );
}

export default function Navbar() {
  const [open, setOpen] = useState(false);
  return (
    <nav className="flex  align-middle filter drop-shadow-md bg-black items-center justify-between h-16 px-5 sm:px-10">
      <MobileNav open={open} setOpen={setOpen} />
      <div>
        <Link href="/">
          <a className="text-white font-vietnam text-xl sm:text-3xl whitespace-nowrap inline-block bg-gradient-to-r hover:-translate-y-1.5 from-yellow-50 to-yellow-100 bg-growing-underline hover:text-black">
            ADRIAN ARANDA
          </a>
        </Link>
      </div>
      <div className="flex justify-end items-center">
        <div
          className="z-50 flex relative w-7 h-7 flex-col justify-between items-center md:hidden"
          onClick={() => {
            setOpen(!open);
          }}
        >
          {/* hamburger button */}
          <span className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${open ? "rotate-45 translate-y-3" : ""}`} />
          <span className={`h-1 w-full bg-white rounded-lg transition-all duration-300 ease-in-out ${open ? "w-0" : "w-full"}`} />
          <span className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${open ? "-rotate-45 -translate-y-3" : ""}`} />
        </div>
        <div className="gap-10 hidden md:flex">
          <Link href="/about">
            <a className="text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400">
              About Me
            </a>
          </Link>
          <Link href="/projects">
            <a className="text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400">
              Projects
            </a>
          </Link>
          <Link href="/resume">
            <a className="text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400">
              CV
            </a>
          </Link>
        </div>
      </div>
    </nav>
  );
}

And this is my section:

import React from "react";
import type { NextPage } from "next";
import Navbar from "../components/Navbar";
import Head from "next/head";
import Image from "next/image";
import adrian2 from "../public/adrian3.png";

const about: NextPage = () => {
  return (
    <>
      <Head>
        <title>Adrián Aranda / About</title>
        <meta name="description" content="Generated by create next app" key="Adrian" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Navbar></Navbar>
      <div className="p-4 sm:pt-[3vh] projects">
        <div className="flex-col sm:flex sm:flex-row px-3 sm:px-24 justify-center items-center align-middle">
          <div className="p-2 sm:hidden">
            <Image alt="adrian aranda" src={adrian2} className="rounded-3xl" />
          </div>
          <div className=" w-4/12 hidden m-auto sm:px-5 sm:block relative aspect-square">
            <Image alt="adrian aranda" src={adrian2} layout="fill" objectFit="cover" className=" rounded-3xl overflow-clipped" />
          </div>

          <div className="flex-column  sm:w-6/12 sm:px-4 sm:pr-4 m-auto ">
            <h3 className="text-white text-[3em] sm:text-[3.5em] transition ease-in-out duration-1000 hover:text-red-400 w-auto inline-block bg-gradient-to-r hover:-translate-y-1">
              <strong>Hello there!</strong>
            </h3>
          </div>
        </div>
      </div>
    </>
  );
};

export default about;