Cta button is not showing

i have a problem with rendering the cta button it works when i add the LOGICAL Not operator { ! } i think this approach isn't very technical can someone help me here is the Navbar.tsx

import { PrismicNextLink } from "@prismicio/next";
import WordMark from "./WordMark";
import Link from "next/link";
import ButtonLink from "@/components/ButtonLink";

type NavBarProps = {
  settings: Content.SettingsDocument;

export default function NavBar({ settings }: NavBarProps) {
  return (
    <nav className="px-4 py-4 md:px-6 md:py-6" aria-label="Main">
      <div className="mx-auto flex max-w-6xl flex-col justify-between py-2 font-medium text-white md:flex-row md:items-center">
        <Link href="/">
          <span className="absolute ml-[69px]  mt-2 font-bold   ">Mugnum</span>
          <WordMark />
          <span className="sr-only">Mugnum.studio Home page</span>

        <ul className="flex gap-6 ">
          {settings.data.navigation.map((item) => {
            if (item.cta_button) {
              return (
                  <ButtonLink field={item.link}>{item.label}</ButtonLink>

            return (
              <li key={item.label}>
                {/*use this "prismicNextLink" for only when retrieving data from prismic*/}
                  className="inline-flex min-h-11 items-center"

and here is the buttonlink.tsx

// src/components/ButtonLink.tsx

import { PrismicNextLink, PrismicNextLinkProps } from "@prismicio/next";
import clsx from "clsx";

export default function ButtonLink({

}: PrismicNextLinkProps) {
  return (
        "focus:ring-offset-3 relative inline-flex h-fit w-fit rounded-full border border-blue-100/20 bg-blue-200/10 px-4 py-2 text-blue-200 outline-none ring-yellow-300 transition-colors after:absolute after:inset-0 after:-z-10 after:animate-pulse after:rounded-full after:bg-yellow-100 after:bg-opacity-0 after:blur-md after:transition-all after:duration-500 hover:border-yellow-200/40 hover:text-yellow-300 after:hover:bg-opacity-15 focus:ring-2",

Since you're already using Tailwind CSS classes for styling, a more technical solution would be to manage the button's appearance directly with CSS.

  1. Remove the logical Not operator {!} from your NavBar component.
  2. Instead, focus on adjusting the styles in your ButtonLink component to achieve the desired appearance of your CTA button.

i just had to turn the ctaButton to true