Why the backdrop blut is not working properly?

im new in programming, espacially in React.
I try ro implement a Navbar component with a backdrop-filter. I used Tailwind css.
on my nav element the filter/tailwind class works, but the ul got no backdrop.
Whats the issue? Im thankfull for every help and if there is a better way just tell me.

Thats my Code:

import React, { useState, useEffect } from "react";
import logoKlein from "../assets/images/logo_klein_ohneSchrift.png";

const Navbar = () => {
  const [isMenuOpen, setIsMenuopen] = useState(false);
  const [isDesktop, setIsDesktop] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsDesktop(window.innerWidth > 768);
    };

    window.addEventListener("resize", handleResize);

    handleResize();

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const toggleMenu = () => {
    setIsMenuopen(!isMenuOpen);
  };

  return (
    <nav className="backdrop-blur-md z-10 w-full p-5 md:flex md:items-center md:justify-between border-none shadow-none fixed">
      <div className="flex justify-between items-center">
        <span className="text-2xl">
          <img
            className="h-14 md:h-20 md:ml-5 inline cursor-pointer"
            src={logoKlein}
          />
        </span>
        <span
          onClick={toggleMenu}
          className="text-5xl cursor-pointer mx-2 md:hidden block"
        >
          <ion-icon
            name={isMenuOpen ? "close-outline" : "menu-outline"}
          ></ion-icon>
        </span>
      </div>
      <ul
        className={`backdrop-blur-2xl border-none shadow-none md:flex md:items-center z-10 left-0 md:z-auto md:static absolute w-full md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 ${
          isMenuOpen ? "opacity-100 top-24" : "opacity-0 h-0 top-14"
        } transition-all ease-in duration-300`}
      >
        <li
          className={`${
            !isDesktop && isMenuOpen ? "opacity-100" : "opacity-0"
          } mx-12 my-6 md:my-0 md:opacity-100`}
        >
          <a href="#" className="text-xl duration-500 navLink">
            Startseite
          </a>
        </li>
        <li
          className={`${
            !isDesktop && isMenuOpen ? "opacity-100" : "opacity-0"
          } mx-12 my-6 md:my-0 md:opacity-100`}
        >
          <a href="#" className="text-xl duration-500 navLink">
            Über uns
          </a>
        </li>
        <li
          className={`${
            !isDesktop && isMenuOpen ? "opacity-100" : "opacity-0"
          } mx-12 my-6 md:my-0 md:opacity-100`}
        >
          <a href="#" className="text-xl duration-500 navLink">
            Kontakt
          </a>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

I tried with custom classes, i tried to add the class to the li elements. Nothing worked