diff --git a/packages/account/src/Components/forms/form-fields.jsx b/packages/account/src/Components/forms/form-fields.jsx
deleted file mode 100644
index 00f0f728df19..000000000000
--- a/packages/account/src/Components/forms/form-fields.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { Field } from 'formik';
-import { DateOfBirthPicker, Input } from '@deriv/components';
-import { toMoment } from '@deriv/shared';
-
-export const DateOfBirthField = ({ name, portal_id, ...rest }) => (
-    <Field name={name}>
-        {({ field: { value }, form: { setFieldValue, errors, touched, setFieldTouched } }) => (
-            <DateOfBirthPicker
-                error={touched.date_of_birth && errors.date_of_birth}
-                name={name}
-                onBlur={() => setFieldTouched(name)}
-                onChange={({ target }) =>
-                    setFieldValue(name, target?.value ? toMoment(target.value).format('YYYY-MM-DD') : '', true)
-                }
-                value={value}
-                portal_id={portal_id}
-                {...rest}
-            />
-        )}
-    </Field>
-);
-
-export const FormInputField = ({ name, optional = false, warn, ...rest }) => (
-    <Field name={name}>
-        {({ field, form: { errors, touched } }) => (
-            <Input
-                type='text'
-                required={!optional}
-                autoComplete='off'
-                error={touched[field.name] && errors[field.name]}
-                warn={warn}
-                {...field}
-                {...rest}
-            />
-        )}
-    </Field>
-);
diff --git a/packages/account/src/Components/forms/form-fields/__tests__/date-of-birth-field.spec.tsx b/packages/account/src/Components/forms/form-fields/__tests__/date-of-birth-field.spec.tsx
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/account/src/Components/forms/form-fields/__tests__/form-input-field.spec.tsx b/packages/account/src/Components/forms/form-fields/__tests__/form-input-field.spec.tsx
new file mode 100644
index 000000000000..00fa36a34253
--- /dev/null
+++ b/packages/account/src/Components/forms/form-fields/__tests__/form-input-field.spec.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import FormInputField from '../form-input-field';
+import { Formik } from 'formik';
+
+describe('Tesing <FormInputField/> component', () => {
+    it('should render properties', () => {
+        const props = {
+            name: 'test-name',
+            optional: true,
+        };
+        render(
+            <Formik initialValues={{}} onSubmit={jest.fn()}>
+                <FormInputField {...props} />
+            </Formik>
+        );
+
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('should render Input field with optional status', () => {
+        const props = {
+            name: 'test-name',
+            optional: true,
+        };
+        render(
+            <Formik initialValues={{}} onSubmit={jest.fn()}>
+                <FormInputField {...props} />
+            </Formik>
+        );
+
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+        expect(screen.getByRole('textbox')).not.toBeRequired();
+    });
+});
diff --git a/packages/account/src/Components/forms/form-fields/date-of-birth-field.tsx b/packages/account/src/Components/forms/form-fields/date-of-birth-field.tsx
new file mode 100644
index 000000000000..fc10f30db161
--- /dev/null
+++ b/packages/account/src/Components/forms/form-fields/date-of-birth-field.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Field, FieldInputProps, FormikHelpers, FormikState } from 'formik';
+import { DateOfBirthPicker, TDatePickerOnChangeEvent } from '@deriv/components';
+import { toMoment } from '@deriv/shared';
+
+type TDateOfBirthFieldProps = {
+    name: string;
+    portal_id: string;
+} & React.ComponentProps<typeof DateOfBirthPicker>;
+
+type TDateOfBirthFieldHelpers = {
+    field: FieldInputProps<string | moment.Moment>;
+    form: FormikHelpers<{ date_of_birth: string | moment.Moment }> &
+        FormikState<{ date_of_birth: string | moment.Moment }>;
+};
+
+/**
+ * DateOfBirthField is a wrapper around DateOfBirthPicker that can be used with Formik.
+ * @name DateOfBirthField
+ * @param {string} name - Name of the field
+ * @param {string} portal_id - Portal ID
+ * @param {TDatePicker} [props] - Other props to pass to DateOfBirthPicker
+ * @returns {React.ReactNode}
+ */
+const DateOfBirthField = ({ name, portal_id, ...rest }: TDateOfBirthFieldProps) => (
+    <Field name={name}>
+        {({
+            field: { value },
+            form: { setFieldValue, errors, touched, setFieldTouched },
+        }: TDateOfBirthFieldHelpers) => (
+            <DateOfBirthPicker
+                {...rest}
+                error={touched.date_of_birth && errors.date_of_birth ? errors.date_of_birth : undefined}
+                name={name}
+                onBlur={() => setFieldTouched(name)}
+                onChange={({ target }: TDatePickerOnChangeEvent) =>
+                    setFieldValue(name, target?.value ? toMoment(target.value).format('YYYY-MM-DD') : '', true)
+                }
+                value={value}
+                portal_id={portal_id}
+            />
+        )}
+    </Field>
+);
+
+export default DateOfBirthField;
diff --git a/packages/account/src/Components/forms/form-fields/form-input-field.tsx b/packages/account/src/Components/forms/form-fields/form-input-field.tsx
new file mode 100644
index 000000000000..15f1942e27d9
--- /dev/null
+++ b/packages/account/src/Components/forms/form-fields/form-input-field.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { FieldInputProps, FormikHelpers, FormikState, Field } from 'formik';
+import { Input } from '@deriv/components';
+
+type FormInputFieldProps = {
+    name: string;
+    optional?: boolean;
+    warn?: string;
+} & React.ComponentProps<typeof Input>;
+
+type TFormInputFieldHelpers = {
+    field: FieldInputProps<string>;
+    form: FormikHelpers<Record<string, string>> & FormikState<Record<string, string>>;
+};
+
+/**
+ * FormInputField is a wrapper around Input that can be used with Formik.
+ * @name FormInputField
+ * @param {string} name - Name of the field
+ * @param {boolean} [optional] - Whether the field is optional
+ * @param {string} [warn] - Display a warning message
+ * @param {Input} [props] - Other props to pass to Input
+ * @returns {React.ReactNode}
+ */
+const FormInputField = ({ name, optional = false, warn, ...rest }: FormInputFieldProps) => (
+    <Field name={name}>
+        {({ field, form: { errors, touched } }: TFormInputFieldHelpers) => (
+            <Input
+                {...field}
+                {...rest}
+                type='text'
+                required={!optional}
+                autoComplete='off'
+                error={touched[field.name] && errors[field.name] ? errors[field.name] : undefined}
+                warn={warn}
+            />
+        )}
+    </Field>
+);
+
+export default FormInputField;
diff --git a/packages/account/src/Components/forms/form-fields/index.ts b/packages/account/src/Components/forms/form-fields/index.ts
new file mode 100644
index 000000000000..8ecb3a2bce22
--- /dev/null
+++ b/packages/account/src/Components/forms/form-fields/index.ts
@@ -0,0 +1,4 @@
+import FormInputField from './form-input-field';
+import DateOfBirthField from './date-of-birth-field';
+
+export { FormInputField, DateOfBirthField };
diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
index f3934fad7ec6..48f18e94678e 100644
--- a/packages/components/src/components/date-picker/date-picker.tsx
+++ b/packages/components/src/components/date-picker/date-picker.tsx
@@ -7,12 +7,8 @@ import MobileWrapper from '../mobile-wrapper';
 import DesktopWrapper from '../desktop-wrapper';
 import { useOnClickOutside } from '../../hooks/use-onclickoutside';
 import { MomentInput } from 'moment';
+import { TDatePickerOnChangeEvent } from '../types';
 
-type TDatePickerOnChangeEvent = {
-    date?: string;
-    duration?: number | null | string;
-    target?: { name: string; value: number | string | moment.Moment | null };
-};
 type TDatePicker = Omit<
     React.ComponentProps<typeof Native> & React.ComponentProps<typeof Input> & React.ComponentProps<typeof Calendar>,
     'value' | 'onSelect' | 'is_datepicker_visible' | 'placement' | 'style' | 'calendar_el_ref' | 'parent_ref'
diff --git a/packages/components/src/components/date-picker/index.ts b/packages/components/src/components/date-picker/index.ts
index e1fd3c52ef90..adfc2a303a54 100644
--- a/packages/components/src/components/date-picker/index.ts
+++ b/packages/components/src/components/date-picker/index.ts
@@ -1,4 +1,3 @@
 import DatePicker from './date-picker';
 import './date-picker.scss';
-
 export default DatePicker;
diff --git a/packages/components/src/components/types/common.types.ts b/packages/components/src/components/types/common.types.ts
index 8b459a97081b..5f9096828d8b 100644
--- a/packages/components/src/components/types/common.types.ts
+++ b/packages/components/src/components/types/common.types.ts
@@ -14,3 +14,9 @@ export type TItem = {
 };
 
 export type TTableRowItem = { component: React.ReactNode };
+
+export type TDatePickerOnChangeEvent = {
+    date?: string;
+    duration?: number | null | string;
+    target?: { name?: string; value?: number | string | moment.Moment | null };
+};
diff --git a/packages/components/src/components/types/index.ts b/packages/components/src/components/types/index.ts
index 7911e1a631d9..98187945e4e1 100644
--- a/packages/components/src/components/types/index.ts
+++ b/packages/components/src/components/types/index.ts
@@ -2,7 +2,7 @@ import { TIconsManifest, TIconProps } from './icons.types';
 import { TAccordionProps, TAccordionItem } from './accordion.types';
 import { TMultiStepProps, TMultiStepRefProps } from './multi-step.types';
 import { TPopoverProps } from './popover.types';
-import { TGetCardLables, TGetContractTypeDisplay } from './common.types';
+import { TGetCardLables, TGetContractTypeDisplay, TDatePickerOnChangeEvent } from './common.types';
 import { TErrorMessages, TGetContractPath, TToastConfig } from './contract.types';
 
 export type {
@@ -18,4 +18,5 @@ export type {
     TGetContractPath,
     TToastConfig,
     TGetContractTypeDisplay,
+    TDatePickerOnChangeEvent,
 };
diff --git a/packages/components/src/index.js b/packages/components/src/index.ts
similarity index 99%
rename from packages/components/src/index.js
rename to packages/components/src/index.ts
index 5c95f4df7fdd..6f0b2fe5fd57 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.ts
@@ -113,3 +113,4 @@ export { default as UnhandledErrorModal } from './components/unhandled-error-mod
 export { default as VerticalTab } from './components/vertical-tab';
 export { default as Wizard } from './components/wizard';
 export * from './hooks';
+export * from './components/types';