Update input components

lib/component/input/text/TextArea.tsx

@@ -1,23 +1,27 @@
 import type { TextAreaProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { useId } from "react";
 
 
 export default function TextArea({
-	id = crypto.randomUUID().replaceAll("-", ""),
+	id,
 	className,
 	inputClassName,
 	labelClassName,
 	name,
 	maxLength,
-	rows,
+	rows = 3,
 	cols,
 	spellCheck,
 	placeholder,
-	defaultValue,
 	value,
 	onChange,
 	disabled
-}: TextAreaProps){
+}: Readonly<TextAreaProps>){
+	const componentId = useId();
+	const activeId = id ?? componentId;
+
+
 	return (
 		<div
 			className={clsx(
@@ -29,7 +33,7 @@ export default function TextArea({
 				className="relative flex flex-row items-center justify-center px-2 py-1 w-full"
 			>
 				<textarea
-					id={id}
+					id={activeId}
 					className={clsx(
 						"peer bg-transparent outline-none placeholder-transparent w-full",
 						inputClassName
@@ -39,7 +43,6 @@ export default function TextArea({
 					maxLength={maxLength}
 					rows={rows}
 					cols={cols}
-					defaultValue={defaultValue}
 					value={value}
 					onChange={onChange}
 					disabled={disabled}
@@ -54,7 +57,7 @@ export default function TextArea({
 						labelClassName
 					)}
 					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
-					htmlFor={id}
+					htmlFor={activeId}
 				>
 					{placeholder}
 				</label>