How to fix the shadcn hover card position bug?

I’m trying to put this hovercard on trigger of my sidebar tab but when the hovercard appears it gets positioned below the relative positioned element. I’m new to next.js. How can I make it work? The other components of shadcn like Dropdown menu does not show this behaviour.

Behaviour

Card positioned below

//Sidebar.tsx

<HoverCard key={index}
  openDelay={0}
  closeDelay={0}
  onOpenChange={(open) => setIsHoverCardOpen(open)}>
 <HoverCardTrigger>
  <SidebarItem title={title} icon={Icon} altIcon={altIcon} href={href} path={path} type={type} className={isHoverCardOpen ? "bg-white-background" : ""} />
 </HoverCardTrigger>
 <HoverCardContent
   align="end"
   side="right"
   alignOffset={-50}
   sideOffset={16}
   className="p-2 border w-[220px] border-[#F0EDF9] rounded-[20px] bg-white"
    style={{
     boxShadow: "0px 2px 16px -4px rgba(0, 0, 0, 0.12)",
    }}>
   <SidebarDropdown />
 </HoverCardContent>
</HoverCard>


//SidebarDropdown.tsx
export const SidebarDropdown = () => {
  return (
    <div
      className="flex flex-col items-start gap-3"
    >
      {dropDownItems.map(({ title, Icon, href }, index) => {
        return (
          <DropDownItem key={index} title={title} icon={Icon} href={href} />
        )
      })}
    </div>
  )
}

//hover-card.tsx

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      "z-[50] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))

//EvaluateBanner.tsx
export const EvaluateBanner = ({icon,title,cta_text,intent}:BannerPorps) => {
  
  return (
    <GradientWrapper>
        <div
          className="relative overflow-hidden flex flex-col md:flex-row items-end justify-end h-full w-full md:items-center md:justify-center gap-6 self-stretch py-4 pl-[22px] md:pl-[140px] pr-[22px] rounded-[22px] bg-white"
          style={{
            boxShadow: "0px 2px 8px -4px rgba(0, 0, 0, 0.08)",
          }}
        >
          <Image
          src={icon}
          alt="GradeReport"
          width={100}
          height={100}
          className="absolute rotate-[14.865deg] md:rotate-0 left-[-5px] bottom-[-14.274px] md:bottom-0 md:left-[20px]"
        />
          <p className="flex-1 text-[28px] text-neutral-900 font-extrabold leading-normal">
            {title}
          </p>
          <EvaluateButton label={cta_text} intent={intent}/>
        </div>
    </GradientWrapper>
  )
}

const GradientWrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <div className="bg-gradient-to-r from-[#FFB0383D] via-[#FF63633D] to-[#6100FF3D] p-[1px] rounded-[23px]">
      {children}
    </div>
  )
}

i tried increasing the z-index of the hover caard but it didnot worked.