diff --git a/src/components/form/autocomplete/form-autocomplete.tsx b/src/components/form/autocomplete/form-autocomplete.tsx
index e82393af..4b76435b 100644
--- a/src/components/form/autocomplete/form-autocomplete.tsx
+++ b/src/components/form/autocomplete/form-autocomplete.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import {
   Controller,
   ControllerProps,
@@ -26,19 +26,19 @@ export type AutocompleteInputProps<T> = {
   getOptionLabel: (option: T) => string;
 };
 
-function AutocompleteInputRaw<T>(
+function AutocompleteInput<T>(
   props: AutocompleteInputProps<T> & {
     name: string;
     value: T | undefined | null;
     onChange: (value: T) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   return (
     <FormControl error={!!props.error} disabled={props.disabled} fullWidth>
       <Autocomplete
-        ref={ref}
+        ref={props.ref}
         id={`autocomplete-${props.name}`}
         options={props.options}
         value={props.value}
@@ -66,15 +66,6 @@ function AutocompleteInputRaw<T>(
   );
 }
 
-const AutocompleteInput = forwardRef(AutocompleteInputRaw) as never as <T>(
-  props: AutocompleteInputProps<T> & {
-    name: string;
-    value: T | undefined | null;
-    onChange: (value: T) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof AutocompleteInputRaw>;
-
 function FormAutocompleteInput<
   TFieldValues extends FieldValues = FieldValues,
   T = unknown,
diff --git a/src/components/form/checkbox-boolean/form-checkbox-boolean.tsx b/src/components/form/checkbox-boolean/form-checkbox-boolean.tsx
index 2d11efdb..5faa2b65 100644
--- a/src/components/form/checkbox-boolean/form-checkbox-boolean.tsx
+++ b/src/components/form/checkbox-boolean/form-checkbox-boolean.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ChangeEvent, ForwardedRef, forwardRef } from "react";
+import { ChangeEvent, Ref } from "react";
 import {
   Controller,
   ControllerProps,
@@ -23,14 +23,14 @@ export type CheckboxBooleanInputProps = {
   testId?: string;
 };
 
-function CheckboxBooleanInputRaw(
+function CheckboxBooleanInput(
   props: CheckboxBooleanInputProps & {
     name: string;
     value: boolean | null;
     onChange: (value: boolean) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const value = props.value ?? false;
   const onChange = (
@@ -46,7 +46,7 @@ function CheckboxBooleanInputRaw(
       variant="standard"
       error={!!props.error}
     >
-      <FormGroup ref={ref}>
+      <FormGroup ref={props.ref}>
         <FormControlLabel
           control={
             <Checkbox
@@ -68,15 +68,6 @@ function CheckboxBooleanInputRaw(
   );
 }
 
-const CheckboxBooleanInput = forwardRef(CheckboxBooleanInputRaw) as never as (
-  props: CheckboxBooleanInputProps & {
-    name: string;
-    value: boolean | null;
-    onChange: (value: boolean) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof CheckboxBooleanInputRaw>;
-
 function FormCheckboxBooleanInput<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
diff --git a/src/components/form/checkbox/form-checkbox.tsx b/src/components/form/checkbox/form-checkbox.tsx
index c12e5f3e..12fcc2c5 100644
--- a/src/components/form/checkbox/form-checkbox.tsx
+++ b/src/components/form/checkbox/form-checkbox.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import {
   Controller,
   ControllerProps,
@@ -28,14 +28,14 @@ export type CheckboxInputProps<T> = {
   renderOption: (option: T) => React.ReactNode;
 };
 
-function CheckboxInputRaw<T>(
+function CheckboxInput<T>(
   props: CheckboxInputProps<T> & {
     name: string;
     value: T[] | undefined | null;
     onChange: (value: T[]) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const value = props.value ?? [];
   const onChange = (checkboxValue: T) => () => {
@@ -61,7 +61,7 @@ function CheckboxInputRaw<T>(
       <FormLabel component="legend" data-testid={`${props.testId}-label`}>
         {props.label}
       </FormLabel>
-      <FormGroup ref={ref}>
+      <FormGroup ref={props.ref}>
         {props.options.map((option) => (
           <FormControlLabel
             key={props.keyExtractor(option)}
@@ -88,15 +88,6 @@ function CheckboxInputRaw<T>(
   );
 }
 
-const CheckboxInput = forwardRef(CheckboxInputRaw) as never as <T>(
-  props: CheckboxInputProps<T> & {
-    name: string;
-    value: T[] | undefined | null;
-    onChange: (value: T[]) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof CheckboxInputRaw>;
-
 function FormCheckboxInput<
   TFieldValues extends FieldValues = FieldValues,
   T = unknown,
diff --git a/src/components/form/date-pickers/date-picker.tsx b/src/components/form/date-pickers/date-picker.tsx
index 32f8d20a..07049b7e 100644
--- a/src/components/form/date-pickers/date-picker.tsx
+++ b/src/components/form/date-pickers/date-picker.tsx
@@ -10,7 +10,7 @@ import {
   FieldPath,
   FieldValues,
 } from "react-hook-form";
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import useLanguage from "@/services/i18n/use-language";
 import { getValueByKey } from "@/components/form/date-pickers/helper";
@@ -29,23 +29,15 @@ type DatePickerFieldProps = {
   error?: string;
   defaultValue?: ValueDateType;
 };
-const DatePickerInput = forwardRef(DatePickerInputRaw) as never as (
-  props: DatePickerFieldProps & {
-    name: string;
-    value: ValueDateType;
-    onChange: (value: ValueDateType) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof DatePickerInputRaw>;
 
-function DatePickerInputRaw(
+function DatePickerInput(
   props: DatePickerFieldProps & {
     name: string;
     value: ValueDateType;
     onChange: (value: ValueDateType) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const language = useLanguage();
 
@@ -55,7 +47,7 @@ function DatePickerInputRaw(
       adapterLocale={getValueByKey(language)}
     >
       <DatePicker
-        ref={ref}
+        ref={props.ref}
         name={props.name}
         label={props.label}
         value={props.value}
@@ -79,6 +71,7 @@ function DatePickerInputRaw(
     </LocalizationProvider>
   );
 }
+
 function FormDatePickerInput<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
diff --git a/src/components/form/date-pickers/date-time-picker.tsx b/src/components/form/date-pickers/date-time-picker.tsx
index 7429a3af..1b7c0caf 100644
--- a/src/components/form/date-pickers/date-time-picker.tsx
+++ b/src/components/form/date-pickers/date-time-picker.tsx
@@ -10,7 +10,7 @@ import {
   FieldPath,
   FieldValues,
 } from "react-hook-form";
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import useLanguage from "@/services/i18n/use-language";
 import { getValueByKey } from "@/components/form/date-pickers/helper";
@@ -29,23 +29,15 @@ type DateTimePickerFieldProps = {
   error?: string;
   defaultValue?: ValueDateType;
 };
-const DateTimePickerInput = forwardRef(DateTimePickerInputRaw) as never as (
-  props: DateTimePickerFieldProps & {
-    name: string;
-    value: ValueDateType;
-    onChange: (value: ValueDateType) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof DateTimePickerInputRaw>;
 
-function DateTimePickerInputRaw(
+function DateTimePickerInput(
   props: DateTimePickerFieldProps & {
     name: string;
     value: ValueDateType;
     onChange: (value: ValueDateType) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const language = useLanguage();
 
@@ -55,7 +47,7 @@ function DateTimePickerInputRaw(
       adapterLocale={getValueByKey(language)}
     >
       <DateTimePicker
-        ref={ref}
+        ref={props.ref}
         name={props.name}
         label={props.label}
         value={props.value}
@@ -81,6 +73,7 @@ function DateTimePickerInputRaw(
     </LocalizationProvider>
   );
 }
+
 function FormDateTimePickerInput<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
diff --git a/src/components/form/date-pickers/time-picker.tsx b/src/components/form/date-pickers/time-picker.tsx
index 5c8c9b75..990a585c 100644
--- a/src/components/form/date-pickers/time-picker.tsx
+++ b/src/components/form/date-pickers/time-picker.tsx
@@ -11,7 +11,7 @@ import {
   FieldPath,
   FieldValues,
 } from "react-hook-form";
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import useLanguage from "@/services/i18n/use-language";
 import { getValueByKey } from "@/components/form/date-pickers/helper";
@@ -33,23 +33,14 @@ type TimePickerFieldProps = {
   timeSteps?: TimeStepOptions | undefined;
 };
 
-const TimePickerInput = forwardRef(TimePickerInputRaw) as never as (
+function TimePickerInput(
   props: TimePickerFieldProps & {
     name: string;
     value: ValueDateType;
     onChange: (value: ValueDateType) => void;
     onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof TimePickerInputRaw>;
-
-function TimePickerInputRaw(
-  props: TimePickerFieldProps & {
-    name: string;
-    value: ValueDateType;
-    onChange: (value: ValueDateType) => void;
-    onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const language = useLanguage();
 
@@ -59,7 +50,7 @@ function TimePickerInputRaw(
       adapterLocale={getValueByKey(language)}
     >
       <TimePicker
-        ref={ref}
+        ref={props.ref}
         name={props.name}
         label={props.label}
         value={props.value}
@@ -87,6 +78,7 @@ function TimePickerInputRaw(
     </LocalizationProvider>
   );
 }
+
 function FormTimePickerInput<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
diff --git a/src/components/form/multiple-select-extended/form-multiple-select-extended.tsx b/src/components/form/multiple-select-extended/form-multiple-select-extended.tsx
index 67668684..f1350b1a 100644
--- a/src/components/form/multiple-select-extended/form-multiple-select-extended.tsx
+++ b/src/components/form/multiple-select-extended/form-multiple-select-extended.tsx
@@ -6,13 +6,7 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import TextField from "@mui/material/TextField";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
-import React, {
-  ForwardedRef,
-  forwardRef,
-  useState,
-  useRef,
-  useEffect,
-} from "react";
+import React, { Ref, useState, useRef, useEffect } from "react";
 import {
   Controller,
   ControllerProps,
@@ -47,20 +41,21 @@ type MultipleSelectExtendedInputProps<T extends object> = {
 );
 
 const MUIComponents = {
-  List: forwardRef<HTMLDivElement, ListProps>(function MuiList(
-    { style, children },
-    listRef
-  ) {
+  List: function MuiList({
+    style,
+    children,
+    ref,
+  }: ListProps & { ref?: Ref<HTMLDivElement> }) {
     return (
       <List
         style={{ padding: 0, ...style, margin: 0 }}
         component="div"
-        ref={listRef}
+        ref={ref}
       >
         {children}
       </List>
     );
-  }),
+  },
 
   Item: ({ children, ...props }: ItemProps<unknown>) => {
     return (
@@ -71,14 +66,14 @@ const MUIComponents = {
   },
 };
 
-function MultipleSelectExtendedInputRaw<T extends object>(
+function MultipleSelectExtendedInput<T extends object>(
   props: MultipleSelectExtendedInputProps<T> & {
     name: string;
     value: T[] | null;
     onChange: (value: T[]) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const [isOpen, setIsOpen] = useState(false);
   const boxRef = useRef<HTMLInputElement | null>(null);
@@ -96,7 +91,7 @@ function MultipleSelectExtendedInputRaw<T extends object>(
       <div>
         <Box mb={0.5} ref={boxRef}>
           <TextField
-            ref={ref}
+            ref={props.ref}
             name={props.name}
             value={props.value ? props.renderSelected(props.value) : ""}
             onBlur={props.onBlur}
@@ -188,17 +183,6 @@ function MultipleSelectExtendedInputRaw<T extends object>(
   );
 }
 
-const MultipleSelectExtendedInput = forwardRef(
-  MultipleSelectExtendedInputRaw
-) as never as <T extends object>(
-  props: MultipleSelectExtendedInputProps<T> & {
-    name: string;
-    value: T[] | null;
-    onChange: (value: T[]) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof MultipleSelectExtendedInputRaw>;
-
 function FormMultipleSelectExtendedInput<
   TFieldValues extends FieldValues = FieldValues,
   T extends object = object,
diff --git a/src/components/form/multiple-select/form-multiple-select.tsx b/src/components/form/multiple-select/form-multiple-select.tsx
index ff316ab7..4dc8045c 100644
--- a/src/components/form/multiple-select/form-multiple-select.tsx
+++ b/src/components/form/multiple-select/form-multiple-select.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import {
   Controller,
   ControllerProps,
@@ -28,20 +28,20 @@ type MultipleSelectInputProps<T extends object> = {
   renderOption: (option: T) => React.ReactNode;
 };
 
-function MultipleSelectInputRaw<T extends object>(
+function MultipleSelectInput<T extends object>(
   props: MultipleSelectInputProps<T> & {
     name: string;
     value: T[] | undefined | null;
     onChange: (value: T[]) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   return (
     <FormControl fullWidth error={!!props.error} disabled={props.disabled}>
       <InputLabel id={`select-label-${props.name}`}>{props.label}</InputLabel>
       <Select
-        ref={ref}
+        ref={props.ref}
         labelId={`select-label-${props.name}`}
         id={`select-${props.name}`}
         value={props.value?.map(
@@ -96,17 +96,6 @@ function MultipleSelectInputRaw<T extends object>(
   );
 }
 
-const MultipleSelectInput = forwardRef(MultipleSelectInputRaw) as never as <
-  T extends object,
->(
-  props: MultipleSelectInputProps<T> & {
-    name: string;
-    value: T | undefined | null;
-    onChange: (value: T) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof MultipleSelectInputRaw>;
-
 function FormMultipleSelectInput<
   TFieldValues extends FieldValues = FieldValues,
   T extends object = object,
diff --git a/src/components/form/radio-group/form-radio-group.tsx b/src/components/form/radio-group/form-radio-group.tsx
index cdf929ef..d92fcdff 100644
--- a/src/components/form/radio-group/form-radio-group.tsx
+++ b/src/components/form/radio-group/form-radio-group.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ForwardedRef, forwardRef, ReactNode } from "react";
+import { Ref, ReactNode } from "react";
 import {
   Controller,
   ControllerProps,
@@ -28,14 +28,14 @@ type RadioInputProps<T> = {
   renderOption: (option: T) => ReactNode;
 };
 
-function RadioInputRaw<T>(
+function RadioInput<T>(
   props: RadioInputProps<T> & {
     name: string;
     value: T | undefined | null;
     onChange: (value: T) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const value = props.value;
 
@@ -53,7 +53,7 @@ function RadioInputRaw<T>(
       <FormLabel component="legend" data-testid={`${props.testId}-label`}>
         {props.label}
       </FormLabel>
-      <RadioGroup ref={ref}>
+      <RadioGroup ref={props.ref}>
         {props.options.map((option) => (
           <FormControlLabel
             key={props.keyExtractor(option)}
@@ -78,15 +78,6 @@ function RadioInputRaw<T>(
   );
 }
 
-const RadioInput = forwardRef(RadioInputRaw) as never as <T>(
-  props: RadioInputProps<T> & {
-    name: string;
-    value: T | undefined | null;
-    onChange: (value: T) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof RadioInputRaw>;
-
 function FormRadioInput<
   TFieldValues extends FieldValues = FieldValues,
   T = unknown,
diff --git a/src/components/form/select-extended/form-select-extended.tsx b/src/components/form/select-extended/form-select-extended.tsx
index 7165af15..e2c82a5d 100644
--- a/src/components/form/select-extended/form-select-extended.tsx
+++ b/src/components/form/select-extended/form-select-extended.tsx
@@ -5,13 +5,7 @@ import ListItemButton from "@mui/material/ListItemButton";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import TextField from "@mui/material/TextField";
-import React, {
-  ForwardedRef,
-  forwardRef,
-  useState,
-  useRef,
-  useEffect,
-} from "react";
+import React, { Ref, useState, useRef, useEffect } from "react";
 import {
   Controller,
   ControllerProps,
@@ -47,20 +41,21 @@ type SelectExtendedInputProps<T extends object> = {
 );
 
 const MUIComponents = {
-  List: forwardRef<HTMLDivElement, ListProps>(function MuiList(
-    { style, children },
-    listRef
-  ) {
+  List: function MuiList({
+    style,
+    children,
+    ref,
+  }: ListProps & { ref?: Ref<HTMLDivElement> }) {
     return (
       <List
         style={{ padding: 0, ...style, margin: 0 }}
         component="div"
-        ref={listRef}
+        ref={ref}
       >
         {children}
       </List>
     );
-  }),
+  },
 
   Item: ({ children, ...props }: ItemProps<unknown>) => {
     return (
@@ -71,14 +66,14 @@ const MUIComponents = {
   },
 };
 
-function SelectExtendedInputRaw<T extends object>(
+function SelectExtendedInput<T extends object>(
   props: SelectExtendedInputProps<T> & {
     name: string;
     value: T | undefined | null;
     onChange: (value: T) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const [isOpen, setIsOpen] = useState(false);
   const boxRef = useRef<HTMLInputElement | null>(null);
@@ -94,7 +89,7 @@ function SelectExtendedInputRaw<T extends object>(
       <div>
         <Box mb={0.5} ref={boxRef}>
           <TextField
-            ref={ref}
+            ref={props.ref}
             name={props.name}
             value={props.value ? props.renderOption(props.value) : ""}
             onBlur={props.onBlur}
@@ -183,17 +178,6 @@ function SelectExtendedInputRaw<T extends object>(
   );
 }
 
-const SelectExtendedInput = forwardRef(SelectExtendedInputRaw) as never as <
-  T extends object,
->(
-  props: SelectExtendedInputProps<T> & {
-    name: string;
-    value: T | undefined | null;
-    onChange: (value: T) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof SelectExtendedInputRaw>;
-
 function FormSelectExtendedInput<
   TFieldValues extends FieldValues = FieldValues,
   T extends object = object,
diff --git a/src/components/form/select/form-select.tsx b/src/components/form/select/form-select.tsx
index e802cf90..b05e43d2 100644
--- a/src/components/form/select/form-select.tsx
+++ b/src/components/form/select/form-select.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import {
   Controller,
   ControllerProps,
@@ -27,20 +27,20 @@ type SelectInputProps<T extends object> = {
   renderOption: (option: T) => React.ReactNode;
 };
 
-function SelectInputRaw<T extends object>(
+function SelectInput<T extends object>(
   props: SelectInputProps<T> & {
     name: string;
     value: T | undefined | null;
     onChange: (value: T) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   return (
     <FormControl fullWidth error={!!props.error} disabled={props.disabled}>
       <InputLabel id={`select-label-${props.name}`}>{props.label}</InputLabel>
       <Select
-        ref={ref}
+        ref={props.ref}
         labelId={`select-label-${props.name}`}
         id={`select-${props.name}`}
         size={props.size}
@@ -80,15 +80,6 @@ function SelectInputRaw<T extends object>(
   );
 }
 
-const SelectInput = forwardRef(SelectInputRaw) as never as <T extends object>(
-  props: SelectInputProps<T> & {
-    name: string;
-    value: T | undefined | null;
-    onChange: (value: T) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof SelectInputRaw>;
-
 function FormSelectInput<
   TFieldValues extends FieldValues = FieldValues,
   T extends object = object,
diff --git a/src/components/form/switch/form-switch.tsx b/src/components/form/switch/form-switch.tsx
index 36c5e30c..7ad43055 100644
--- a/src/components/form/switch/form-switch.tsx
+++ b/src/components/form/switch/form-switch.tsx
@@ -13,7 +13,7 @@ import FormLabel from "@mui/material/FormLabel";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormGroup from "@mui/material/FormGroup";
 import Switch from "@mui/material/Switch";
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 
 export type SwitchInputProps<T> = {
   label: string;
@@ -28,14 +28,14 @@ export type SwitchInputProps<T> = {
   renderOption: (option: T) => React.ReactNode;
 };
 
-function SwitchInputRaw<T>(
+function SwitchInput<T>(
   props: SwitchInputProps<T> & {
     name: string;
     value: T[] | undefined | null;
     onChange: (value: T[]) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const value = props.value ?? [];
 
@@ -63,7 +63,7 @@ function SwitchInputRaw<T>(
       <FormLabel component="legend" data-testid={`${props.testId}-label`}>
         {props.label}
       </FormLabel>
-      <FormGroup ref={ref}>
+      <FormGroup ref={props.ref}>
         {props.options.map((option) => (
           <FormControlLabel
             key={props.keyExtractor(option)}
@@ -90,15 +90,6 @@ function SwitchInputRaw<T>(
   );
 }
 
-const SwitchInput = forwardRef(SwitchInputRaw) as never as <T>(
-  props: SwitchInputProps<T> & {
-    name: string;
-    value: T[] | undefined | null;
-    onChange: (value: T[]) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof SwitchInputRaw>;
-
 function FormSwitchInput<
   TFieldValues extends FieldValues = FieldValues,
   T = unknown,
diff --git a/src/components/form/text-input/form-text-input.tsx b/src/components/form/text-input/form-text-input.tsx
index 53d62f10..ae266725 100644
--- a/src/components/form/text-input/form-text-input.tsx
+++ b/src/components/form/text-input/form-text-input.tsx
@@ -4,7 +4,7 @@ import Visibility from "@mui/icons-material/Visibility";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
-import React, { ChangeEvent, forwardRef, useState } from "react";
+import React, { ChangeEvent, Ref, useState } from "react";
 import {
   Controller,
   ControllerProps,
@@ -29,17 +29,17 @@ type TextInputProps = {
   size?: "small" | "medium";
 };
 
-const TextInput = forwardRef<
-  HTMLDivElement | null,
-  TextInputProps & {
+function TextInput(
+  props: TextInputProps & {
     name: string;
     value: string;
     onChange: (
       value: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
     ) => void;
     onBlur: () => void;
+    ref?: Ref<HTMLDivElement | null>;
   }
->(function TextInput(props, ref) {
+) {
   const [isShowPassword, setIsShowPassword] = useState(false);
 
   const handleClickShowPassword = () => setIsShowPassword((show) => !show);
@@ -51,7 +51,7 @@ const TextInput = forwardRef<
   };
   return (
     <TextField
-      ref={ref}
+      ref={props.ref}
       name={props.name}
       size={props.size}
       value={props.value}
@@ -94,7 +94,7 @@ const TextInput = forwardRef<
       }}
     />
   );
-});
+}
 
 function FormTextInput<
   TFieldValues extends FieldValues = FieldValues,
diff --git a/src/components/link.tsx b/src/components/link.tsx
index 564e3acc..7786f323 100644
--- a/src/components/link.tsx
+++ b/src/components/link.tsx
@@ -6,46 +6,44 @@ import {
 // Need for leave page logic
 // eslint-disable-next-line no-restricted-imports
 import NextLink, { LinkProps } from "next/link";
-import { forwardRef, useContext } from "react";
+import { Ref, useContext } from "react";
 
-const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  function Link(props, ref) {
-    const language = useLanguage();
-    const { isLeavePage } = useContext(LeavePageContext);
-    const { setLeavePage, openModal } = useContext(LeavePageActionsContext);
-    let href = props.href;
+function Link(props: LinkProps & { ref?: Ref<HTMLAnchorElement> }) {
+  const language = useLanguage();
+  const { isLeavePage } = useContext(LeavePageContext);
+  const { setLeavePage, openModal } = useContext(LeavePageActionsContext);
+  let href = props.href;
 
-    if (typeof href === "string" && href.startsWith("/")) {
-      href = `/${language}${href}`;
-    } else if (typeof href === "object" && href !== null) {
-      const pathname = href.pathname
-        ? `/${language}${href.pathname}`
-        : href.pathname;
-      href = {
-        ...href,
-        pathname,
-      };
-    }
-
-    return (
-      <NextLink
-        ref={ref}
-        {...props}
-        href={href}
-        onClick={(e) => {
-          if (isLeavePage) {
-            e.preventDefault();
-            setLeavePage({
-              [props.replace ? "replace" : "push"]: href,
-            });
-            openModal();
-          } else {
-            props.onClick?.(e);
-          }
-        }}
-      />
-    );
+  if (typeof href === "string" && href.startsWith("/")) {
+    href = `/${language}${href}`;
+  } else if (typeof href === "object" && href !== null) {
+    const pathname = href.pathname
+      ? `/${language}${href.pathname}`
+      : href.pathname;
+    href = {
+      ...href,
+      pathname,
+    };
   }
-);
+
+  return (
+    <NextLink
+      ref={props.ref}
+      {...props}
+      href={href}
+      onClick={(e) => {
+        if (isLeavePage) {
+          e.preventDefault();
+          setLeavePage({
+            [props.replace ? "replace" : "push"]: href,
+          });
+          openModal();
+        } else {
+          props.onClick?.(e);
+        }
+      }}
+    />
+  );
+}
 
 export default Link;
diff --git a/src/components/table/table-components.tsx b/src/components/table/table-components.tsx
index 8b2d5af0..2da7c1ca 100644
--- a/src/components/table/table-components.tsx
+++ b/src/components/table/table-components.tsx
@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { Ref } from "react";
 import Table, { TableProps } from "@mui/material/Table";
 import TableBody, { TableBodyProps } from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
@@ -6,23 +6,28 @@ import TableHead from "@mui/material/TableHead";
 import TableFooter from "@mui/material/TableFooter";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
-import { TableComponents as TableComponentsType } from "react-virtuoso";
+import {
+  ScrollerProps,
+  TableComponents as TableComponentsType,
+} from "react-virtuoso";
 
 const TableComponents = {
-  Scroller: forwardRef<HTMLDivElement>(function Scroller(props, ref) {
-    return <TableContainer component={Paper} {...props} ref={ref} />;
-  }),
+  Scroller: function Scroller(
+    props: ScrollerProps & { ref?: Ref<HTMLDivElement> }
+  ) {
+    return <TableContainer component={Paper} {...props} ref={props.ref} />;
+  },
   Table: (props: TableProps) => (
     <Table stickyHeader {...props} style={{ borderCollapse: "separate" }} />
   ),
   TableHead: TableHead as unknown as TableComponentsType["TableHead"],
   TableFoot: TableFooter as unknown as TableComponentsType["TableFoot"],
   TableRow: TableRow,
-  TableBody: forwardRef<HTMLTableSectionElement, TableBodyProps>(
-    function BodyTable(props, ref) {
-      return <TableBody {...props} ref={ref} />;
-    }
-  ),
+  TableBody: function BodyTable(
+    props: TableBodyProps & { ref?: Ref<HTMLTableSectionElement> }
+  ) {
+    return <TableBody {...props} ref={props.ref} />;
+  },
 };
 
 export default TableComponents;