fix: input error object not accessed properly

packages/ui/src/components/date-picker.tsx

@@ -8,6 +8,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { Calendar } from 'lucide-react';
 import { Typography } from '@/components/typography';
 import cn from '@/lib/classnames';
+import get from 'lodash.get';
 
 export type DatePickerProps = {
   validation?: RegisterOptions;
@@ -43,7 +44,7 @@ const DatePicker = ({
     formState: { errors },
     control,
   } = useFormContext();
-  const error = errors[id] || null;
+  const error = get(errors, id);
   const withLabel = label !== null;
 
   // If there is a year default, then change the year to the props

packages/ui/src/components/dropzone-input.tsx

@@ -6,6 +6,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import type { FileWithPreview } from '@/types/dropzone';
 import { Typography } from '@/components/typography';
 import { FilePreview } from '@/components/file-preview';
+import get from 'lodash.get';
 
 export type DropzoneInputProps = {
   accept?: Accept;
@@ -44,7 +45,7 @@ const DropzoneInput = ({
     clearErrors,
     formState: { errors },
   } = useFormContext();
-  const error = errors[id] || null;
+  const error = get(errors, id);
   const withLabel = label !== null;
 
   //#region  //*=========== Error Focus ===========

packages/ui/src/components/input.tsx

@@ -3,6 +3,7 @@ import type { LucideIcon } from 'lucide-react';
 import * as React from 'react';
 import type { RegisterOptions } from 'react-hook-form';
 import { useFormContext } from 'react-hook-form';
+import get from 'lodash.get';
 import { Typography } from '@/components/typography';
 
 export type InputProps = {
@@ -52,7 +53,7 @@ const Input = ({
     register,
     formState: { errors },
   } = useFormContext();
-  const error = errors[id] || null;
+  const error = get(errors, id);
   const withLabel = label !== null;
 
   return (

packages/ui/src/components/password-input.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import type { RegisterOptions } from 'react-hook-form';
 import { useFormContext } from 'react-hook-form';
 import { Typography } from '@/components/typography';
+import get from 'lodash.get';
 
 export type PasswordInputProps = {
   /** Input label */
@@ -48,7 +49,7 @@ const PasswordInput = ({
     formState: { errors },
   } = useFormContext();
 
-  const error = errors[id] || null;
+  const error = get(errors, id);
   const withLabel = label !== null;
 
   const [showPassword, setShowPassword] = useState(false);

packages/ui/src/components/select.tsx

@@ -3,6 +3,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import type { MultiValue, StylesConfig } from 'react-select';
 import ReactSelect, { components } from 'react-select';
 import { ChevronDown, X } from 'lucide-react';
+import get from 'lodash.get';
 import type { ExtractProps } from '@/types/helper';
 import { Typography } from '@/components/typography';
 import cn from '@/lib/classnames';
@@ -42,8 +43,7 @@ const Select = ({
     control,
     formState: { errors },
   } = useFormContext();
-  const error = errors[id] || null;
-
+  const error = get(errors, id);
   const withLabel = label !== null;
 
   //#region  //*=========== Styles ===========

packages/ui/src/components/textarea.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import type { RegisterOptions } from 'react-hook-form';
 import { useFormContext } from 'react-hook-form';
+import get from 'lodash.get';
 import { Typography } from '@/components/typography';
 
 export type TextareaProps = {
@@ -30,7 +31,7 @@ const Textarea = ({
     register,
     formState: { errors },
   } = useFormContext();
-  const error = errors[id] || null;
+  const error = get(errors, id);
   const withLabel = label !== null;
 
   return (