fix ref type error

src/components/ui/alert.tsx

@@ -22,52 +22,44 @@ const alertVariants = cva(
     },
 );
 
-const Alert = (
-    {
-        ref,
-        className,
-        variant,
-        ...props
-    }
-) => (<div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-/>);
+const Alert = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+    <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+    />
+));
 Alert.displayName = "Alert";
 
-const AlertTitle = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLHeadingElement> & {
-        ref: React.RefObject<HTMLParagraphElement>;
-    }
-) => (<h5
-    ref={ref}
-    className={cn(
-        "mb-1 font-medium leading-none tracking-tight",
-        className,
-    )}
-    {...props}
-/>);
+const AlertTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h5
+        ref={ref}
+        className={cn(
+            "mb-1 font-medium leading-none tracking-tight",
+            className,
+        )}
+        {...props}
+    />
+));
 AlertTitle.displayName = "AlertTitle";
 
-const AlertDescription = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLParagraphElement> & {
-        ref: React.RefObject<HTMLParagraphElement>;
-    }
-) => (<div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-/>);
+const AlertDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("text-sm [&_p]:leading-relaxed", className)}
+        {...props}
+    />
+));
 AlertDescription.displayName = "AlertDescription";
 
 export { Alert, AlertTitle, AlertDescription };