className won't work, did I miss something?

[wolfcarves]

/* eslint-disable react/display-name */
import { forwardRef } from "react";
import { ActivityIndicator } from "react-native";
import {
   TouchableNativeFeedback,
   TouchableOpacity,
   type TouchableOpacityProps,
   type TouchableNativeFeedbackProps,
   View,
} from "react-native";
import { cva, type VariantProps } from "cva";

const component = cva("justify-center items-center overflow-hidden", {
   variants: {
      variant: {
         primary: "bg-primary",
         link: "bg-transparent",
         outline: "bg-transparent border border-stroke",
         outline_fade: "bg-card border border-stroke",
      },
      size: {
         xxs: "h-[30px]",
         xs: "h-9",
         sm: "h-10",
         base: "h-12",
         lg: "h-14",
      },
      radius: {
         none: "rounded-none",
         sm: "rounded-sm",
         base: "rounded-md",
         md: "rounded-lg",
         lg: "rounded-2xl",
         full: "rounded-full",
      },
      icon: {
         true: "aspect-square",
      },
      width: {
         full: "w-full",
      },
   },
   defaultVariants: {
      variant: "primary",
      size: "base",
      radius: "base",
      width: "full",
   },
});

type ComponentProps = VariantProps<typeof component>;

interface RippleProps extends ComponentProps, TouchableNativeFeedbackProps {
   isLoading?: boolean;
}

const Ripple = forwardRef<TouchableNativeFeedback, RippleProps>(
   ({ variant, size, radius, icon, width, children, className, isLoading, ...props }, ref) => {
      return (
         <>
            <View
               className={`overflow-hidden ${component({ variant, size, radius, icon, width, className })}`}
            >
               <TouchableNativeFeedback
                  ref={ref}
                  background={TouchableNativeFeedback.Ripple("#aaaaffab", false)}
                  {...props}
               >
                  <View className={`justify-center items-center w-full h-full`}>
                     {isLoading ? (
                        <ActivityIndicator size={28} color={variant === "primary" ? "white" : "black"} />
                     ) : (
                        children
                     )}
                  </View>
               </TouchableNativeFeedback>
            </View>
         </>
      );
   },
);

interface OpacityProps extends ComponentProps, TouchableOpacityProps {
   isLoading?: boolean;
}

const Opacity = forwardRef<TouchableOpacity, OpacityProps>(
   ({ variant, size, radius, icon, width, children, className, isLoading, ...props }, ref) => {
      return (
         <>
            <TouchableOpacity ref={ref} activeOpacity={0.6} {...props}>
               <View
                  className={`overflow-hidden ${component({ variant, size, radius, icon, width, className })}`}
               >
                  <>
                     {isLoading ? (
                        <ActivityIndicator size={28} color={variant === "primary" ? "white" : "black"} />
                     ) : (
                        children
                     )}
                  </>
               </View>
            </TouchableOpacity>
         </>
      );
   },
);

export default {
   Ripple,
   Opacity,
};

Usage:

 <Button.Ripple
    isLoading={isLoginLoading}
    variant="primary"
    size="lg"
    className="hidden"
    onPress={handleSubmit(handeFormSubmit)}
  >
    <Span color="background" weight="semibold" uppercase>
       Login
    </Span>
</Button.Ripple>

This is weird, className don't work but works in Button.Opacity, tried to replace the className in Ripple with 'css' and it works, something wrong with the keyword className.