TextAreaFormField is replaced with TextArea ui component

src/hooks/useFileManager.tsx

@@ -3,14 +3,17 @@ import { t } from "i18next";
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { cn } from "@/lib/utils";
+
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 
 import DialogModal from "@/components/Common/Dialog";
 import FilePreviewDialog from "@/components/Common/FilePreviewDialog";
 import { StateInterface } from "@/components/Files/FileUpload";
-import TextAreaFormField from "@/components/Form/FormFields/TextAreaFormField";
 import TextFormField from "@/components/Form/FormFields/TextFormField";
 import { FileUploadModel } from "@/components/Patient/models";
 
@@ -290,22 +293,26 @@ export default function useFileManager(
           className="mx-2 my-4 flex w-full flex-col"
         >
           <div>
-            <TextAreaFormField
+            <Label className="text-gray-800 mb-2">
+              State the reason for archiving <b>{archiveDialogueOpen?.name}</b>{" "}
+              file?
+            </Label>
+            <Textarea
               name="editFileName"
               id="archive-file-reason"
-              label={
-                <span>
-                  State the reason for archiving{" "}
-                  <b>{archiveDialogueOpen?.name}</b> file?
-                </span>
-              }
               rows={6}
               required
               placeholder="Type the reason..."
               value={archiveReason}
-              onChange={(e) => setArchiveReason(e.value)}
-              error={archiveReasonError}
+              onChange={(e) => setArchiveReason(e.target.value)}
+              className={cn(
+                archiveReasonError &&
+                  "border-red-500 focus-visible:ring-red-500",
+              )}
             />
+            {archiveReasonError && (
+              <p className="text-sm text-red-500">{archiveReasonError}</p>
+            )}
           </div>
           <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row">
             <Button
@@ -316,7 +323,7 @@ export default function useFileManager(
               {t("cancel")}
             </Button>
             <Button type="submit" variant="primary" disabled={archiving}>
-              {t("proceed")}
+              {t("Proceed")}
             </Button>
           </div>
         </form>