Problems with classes in Tailwind when mapping

I have an API that pulls all data from a table into one. The issue is that I have a Header Component with links, and to make it more flexible and dynamic, I want to separate the pages that have the same category as the link and map them into objects, filtering them. All the mapping goes very smoothly, however when I try to apply the Tailwind classes to them, in case the link they redirect to is the current one, for some reason it adds several commas at the end of the classes “,,,,”.

I’m using NextJS App Directory and Tailwind. Here is the code I used in the Header:

<li
          className={`h-full flex flex-col justify-center group items-center cursor-pointer text-[17px] text-[gray] hover:text-[hsl(var(--theme-color-light))] px-2 border-4 border-transparent ${pages
            .filter((p) => p.category === "8")
            .map((p) =>
              pathname === "/paginas/" + p.url
                ? "font-bold text-[hsl(var(--theme-color))] border-t-[hsl(var(--theme-color))]"
                : ""
            )}`}
        >
          HABBLETXD
          <ul className="absolute rounded-[0.3rem] shadow-[0px_0px_20px_hsla(0,0%,0%,0.25)] top-[65px] opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all before:content-[''] before:w-0 before:h-0 before:absolute before:border-[7.5px] before:border-transparent before:border-b-[hsl(var(--theme-color))] before:top-[-15px] before:left-[calc(50%-10px)]">
            <div className="h-full w-full flex flex-col rounded-[0.3rem] overflow-hidden">
              {pages
                .filter((p) => p.category === "8")
                .map((item) => (
                  <a
                    className="px-4 py-[0.9rem] h-full w-full bg-white flex justify-center items-center text-base font-bold text-[hsl(var(--theme-color))] transition-all hover:bg-[hsl(var(--theme-color))] hover:text-white"
                    style={{ textShadow: "0px 0px 5px hsla(0, 0%, 0%, 0.25)" }}
                    key={item.name}
                    href={`/paginas/${item.url}`}
                  >
                    {item.name}
                  </a>
                ))}
            </div>
          </ul>
        </li>

The data I used in this code I set in states. In addition, I used hooks from NextJS itself, such as usePathname (pathname).

Here’s the print of how the code results: