shadcn/ui variant typescript error

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground",
        secondary: "border-transparent bg-secondary text-secondary-foreground",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground",
        outline: "text-foreground",
        research: "border-transparent bg-green-500/20 text-green-500",
        design: "border-transparent bg-red-500/20 text-red-500",
        development: "border-transparent bg-yellow-500/20 text-yellow-500",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

  <Badge key={i} variant={`${category}`} className="capitalize">
        {category}
  </Badge>

Type 'string' is not assignable to type '"default" | "secondary" | "destructive" | "outline" | "research" | "design" | "development" | null | undefined'.ts(2322)

(property) variant?: "default" | "secondary" | "destructive" | "outline" | "research" | "design" | "development" | null | undefined