From cfdc0528cbb79b8c38f2e83cb0752e977b5142c3 Mon Sep 17 00:00:00 2001
From: hyochan <dooboolab@gmail.com>
Date: Mon, 14 Aug 2023 00:34:25 +0900
Subject: [PATCH] refactor(type): change ReactElement to JSX.Element

---
 .../components/Accordion/AccordionStories.tsx |  4 +-
 docs/src/components/Button/ButtonStories.tsx  | 18 ++--
 .../ButtonGroup/ButtonGroupStories.tsx        |  6 +-
 .../components/Checkbox/CheckboxStories.tsx   | 14 +--
 .../components/EditText/EditTextStories.tsx   |  6 +-
 docs/src/components/Fab/FabStories.tsx        |  6 +-
 docs/src/components/Icon/IconStories.tsx      | 10 +-
 .../IconButton/IconButtonStories.tsx          |  6 +-
 .../LoadingIndicatorStories.tsx               |  6 +-
 .../RadioGroup/RadioGroupStories.tsx          |  6 +-
 .../SwitchToggle/SwitchToggleStories.tsx      |  6 +-
 main/modals/AlertDialog/index.tsx             |  9 +-
 main/modals/Snackbar/index.tsx                |  3 +-
 main/providers/index.tsx                      | 10 +-
 main/uis/Accordion/AccordionItem.tsx          |  3 +-
 .../Accordion/__tests__/Accordion.test.tsx    |  3 +-
 main/uis/Accordion/index.tsx                  |  9 +-
 main/uis/Button/__tests__/Button.test.tsx     |  3 +-
 main/uis/Button/index.tsx                     | 23 +++--
 .../__tests__/ButtonGroup.test.tsx            |  4 +-
 main/uis/ButtonGroup/index.tsx                |  7 +-
 main/uis/Checkbox/__tests__/Checkbox.test.tsx |  3 +-
 main/uis/Checkbox/index.tsx                   |  7 +-
 main/uis/CustomPressable.tsx                  |  3 +-
 main/uis/EditText/__tests__/EditText.test.tsx |  7 +-
 main/uis/EditText/index.tsx                   | 24 ++---
 main/uis/Fab/__tests__/Fab.test.tsx           |  3 +-
 main/uis/Fab/index.tsx                        |  3 +-
 main/uis/Hr/__tests__/Hr.test.tsx             |  3 +-
 main/uis/Icon/__tests__/Icon.test.tsx         |  3 +-
 .../IconButton/__tests__/IconButton.test.tsx  |  3 +-
 main/uis/IconButton/index.tsx                 | 12 +--
 .../__tests__/LoadingIndicator.test.tsx       |  4 +-
 main/uis/LoadingIndicator/index.tsx           |  5 +-
 .../__tests__/NetworkImage.test.tsx           |  2 +-
 main/uis/NetworkImage/index.tsx               |  5 +-
 .../__tests__/ProgressBar.test.tsx            |  3 +-
 main/uis/ProgressCircle/index.tsx             |  3 +-
 main/uis/RadioGroup/RadioButton.tsx           |  4 +-
 .../RadioGroup/__tests__/RadioGroup.test.tsx  |  2 +-
 main/uis/RadioGroup/index.tsx                 |  3 +-
 main/uis/Rating.test.tsx                      |  3 +-
 main/uis/Rating.tsx                           |  5 +-
 .../__tests__/StatusBarBrightness.test.tsx    |  3 +-
 main/uis/StatusbarBrightness/index.tsx        |  3 +-
 .../__tests__/SwitchToggle.test.tsx           |  3 +-
 main/uis/SwitchToggle/index.tsx               |  3 +-
 .../Typography/__tests__/Typography.test.tsx  |  3 +-
 main/utils/guards.ts                          | 11 +--
 packages/CalendarCarousel/README.md           |  4 +-
 packages/CalendarCarousel/index.tsx           | 12 +--
 packages/GiftedChat/README.md                 | 16 ++--
 packages/GiftedChat/index.tsx                 | 16 ++--
 packages/PinchZoom/index.tsx                  |  4 +-
 packages/__tests__/CalendarCarousel.test.tsx  |  4 +-
 packages/__tests__/GiftedChat.test.tsx        |  2 +-
 packages/theme/ThemeProvider.test.tsx         |  5 +-
 packages/theme/ThemeProvider.tsx              |  5 +-
 packages/theme/createDoobooContext.test.tsx   |  3 +-
 stories/Common.tsx                            |  7 +-
 .../AlertDialogBasicStory.tsx                 |  3 +-
 .../SnackbarStories/SnackbarBasicStory.tsx    |  3 +-
 .../CalendarCarouselBasicStory.tsx            |  2 +-
 .../PinchZoomArticleStory.tsx                 |  4 +-
 .../PinchZoomImageListStory.tsx               |  7 +-
 .../PinchZoomImageSliderStory.tsx             |  5 +-
 .../AccordionStories/AccordionBasicStory.tsx  |  3 +-
 .../AccordionStories/AccordionCustomStory.tsx |  3 +-
 .../ButtonGroupBasicStory.tsx                 |  2 +-
 .../uis/ButtonStories/ButtonBasicStory.tsx    |  3 +-
 .../ButtonColorStory/OutlinedButtonColors.tsx |  3 +-
 .../ButtonColorStory/SolidButtonColors.tsx    |  3 +-
 .../ButtonColorStory/TextButtonColors.tsx     |  3 +-
 .../ButtonStories/ButtonColorStory/index.tsx  |  3 +-
 .../uis/ButtonStories/ButtonCustomStory.tsx   |  3 +-
 .../uis/ButtonStories/ButtonDisabledStory.tsx |  3 +-
 .../ButtonEventStory/Counter.tsx              |  3 +-
 .../ButtonEventStory/GoogleSignIn.tsx         |  3 +-
 .../ButtonStories/ButtonEventStory/index.tsx  |  3 +-
 .../ButtonLoadingStory/LoadingElement.tsx     |  3 +-
 .../ButtonLoadingStory/index.tsx              |  3 +-
 stories/uis/ButtonStories/ButtonSizeStory.tsx |  3 +-
 .../ButtonStories/ButtonStartAndEndStory.tsx  |  3 +-
 .../CheckboxStories/CheckboxBasicStory.tsx    | 93 ++++++++++---------
 .../CheckboxEndElementStory.tsx               | 37 ++++----
 .../CheckboxStartElementStory.tsx             | 45 +++++----
 .../EditTextStories/EditTextBasicStory.tsx    |  5 +-
 .../EditTextStories/EditTextStartEndStory.tsx |  3 +-
 stories/uis/FabStories/FabBasicStory.tsx      |  3 +-
 .../IconButtonBasicStory.tsx                  |  3 +-
 .../IconButtonColorStory.tsx                  |  3 +-
 .../IconButtonDisabledStory.tsx               |  3 +-
 .../IconButtonIconElementStory.tsx            |  3 +-
 .../IconButtonLoadingStory/LoadingElement.tsx |  3 +-
 .../IconButtonLoadingStory/index.tsx          |  3 +-
 .../IconButtonStories/IconButtonSizeStory.tsx |  3 +-
 stories/uis/IconStories/IconBasicStory.tsx    |  5 +-
 .../LoadingIndicatorBasicStory.tsx            |  3 +-
 .../LoadingIndicatorCustomStory.tsx           |  3 +-
 .../LoadingIndicatorImageStory.tsx            |  2 +-
 .../NetworkImageBasicStory.tsx                |  2 +-
 .../ProgressBarBasicStory.tsx                 |  3 +-
 .../ProgressCircleBasicStory.tsx              |  3 +-
 .../RadioGroupBasicStory.tsx                  |  3 +-
 .../RadioGroupElementStory.tsx                |  3 +-
 .../uis/RatingStories/RatingBasicStory.tsx    |  3 +-
 .../SwitchToggleBasicStory.tsx                |  3 +-
 .../TypographyBasicStory.tsx                  |  2 +-
 test/testUtils.tsx                            |  5 +-
 109 files changed, 313 insertions(+), 384 deletions(-)

diff --git a/docs/src/components/Accordion/AccordionStories.tsx b/docs/src/components/Accordion/AccordionStories.tsx
index 0309b0d7..41011af3 100644
--- a/docs/src/components/Accordion/AccordionStories.tsx
+++ b/docs/src/components/Accordion/AccordionStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import type {Meta, Story} from '@storybook/react/types-6-0';
 import {Accordion, DoobooProvider} from 'dooboo-ui';
 import {useDarkMode} from 'storybook-dark-mode';
@@ -11,7 +11,7 @@ export default {
 
 const Template: Story<ComponentProps<typeof Accordion>> = (
   args,
-): ReactElement => {
+): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
diff --git a/docs/src/components/Button/ButtonStories.tsx b/docs/src/components/Button/ButtonStories.tsx
index 141d9273..28cf05b6 100644
--- a/docs/src/components/Button/ButtonStories.tsx
+++ b/docs/src/components/Button/ButtonStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {Image, View} from 'react-native';
 import {css} from '@emotion/native';
@@ -29,7 +29,7 @@ const initialProps: ButtonProps = {
   type: 'solid',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -39,7 +39,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const ButtonStory: Story<ButtonProps> = (args): ReactElement => {
+const ButtonStory: Story<ButtonProps> = (args): JSX.Element => {
   return (
     <Container>
       <Button {...args} />
@@ -51,7 +51,7 @@ export const ButtonTemplate = ButtonStory.bind({});
 ButtonTemplate.args = initialProps;
 
 // Story: Button Types - Solid
-const ButtonTypesStory = ({type}: {type?: ButtonType}): ReactElement => {
+const ButtonTypesStory = ({type}: {type?: ButtonType}): JSX.Element => {
   const colors: ButtonColorType[] = [
     'primary',
     'secondary',
@@ -88,22 +88,22 @@ const ButtonTypesStory = ({type}: {type?: ButtonType}): ReactElement => {
   );
 };
 
-export const ButtonTypeSolidStory = (): ReactElement => (
+export const ButtonTypeSolidStory = (): JSX.Element => (
   <ButtonTypesStory type="solid" />
 );
 
 // Story: Button Types - Outline
-export const ButtonTypeOutlinedStory = (): ReactElement => (
+export const ButtonTypeOutlinedStory = (): JSX.Element => (
   <ButtonTypesStory type="outlined" />
 );
 
 // Story: Button Types - Text
-export const ButtonTypeTextStory = (): ReactElement => (
+export const ButtonTypeTextStory = (): JSX.Element => (
   <ButtonTypesStory type="text" />
 );
 
 // Story: Button Sizes
-export function ButtonSizeStory(): ReactElement {
+export function ButtonSizeStory(): JSX.Element {
   const sizes: ButtonSizeType[] = ['large', 'medium', 'small'];
 
   return (
@@ -132,7 +132,7 @@ export function ButtonSizeStory(): ReactElement {
 }
 
 // Story: Button Elements
-export const ButtonElementStory = (): ReactElement => {
+export const ButtonElementStory = (): JSX.Element => {
   const [facebookLoading, setFacebookLoading] = useState<boolean>(false);
   const [googleLoading, setGoogleLoading] = useState<boolean>(false);
 
diff --git a/docs/src/components/ButtonGroup/ButtonGroupStories.tsx b/docs/src/components/ButtonGroup/ButtonGroupStories.tsx
index 69b513c2..1c3dc27c 100644
--- a/docs/src/components/ButtonGroup/ButtonGroupStories.tsx
+++ b/docs/src/components/ButtonGroup/ButtonGroupStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import type {Meta, Story} from '@storybook/react/types-6-0';
 import {ButtonGroup, DoobooProvider} from 'dooboo-ui';
@@ -18,7 +18,7 @@ const initialProps: ButtonGroupProps = {
   color: 'primary',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -28,7 +28,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const ButtonGroupStory: Story<ButtonGroupProps> = (args): ReactElement => {
+const ButtonGroupStory: Story<ButtonGroupProps> = (args): JSX.Element => {
   const {options, initialValue} = args;
   const [selectedIndex, setSelectedIndex] = useState(initialValue);
 
diff --git a/docs/src/components/Checkbox/CheckboxStories.tsx b/docs/src/components/Checkbox/CheckboxStories.tsx
index 3e350015..bad6c558 100644
--- a/docs/src/components/Checkbox/CheckboxStories.tsx
+++ b/docs/src/components/Checkbox/CheckboxStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -18,7 +18,7 @@ const initialProps: CheckboxProps = {
   checked: false,
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -34,7 +34,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const CheckboxStory: Story<CheckboxProps> = (args): ReactElement => {
+const CheckboxStory: Story<CheckboxProps> = (args): JSX.Element => {
   return (
     <Container>
       <Checkbox {...args} />
@@ -46,7 +46,7 @@ export const CheckboxTemplate = CheckboxStory.bind({});
 CheckboxTemplate.args = initialProps;
 
 // Disabled
-export function CheckboxDisabledStory(): ReactElement {
+export function CheckboxDisabledStory(): JSX.Element {
   return (
     <Container>
       <View
@@ -64,7 +64,7 @@ export function CheckboxDisabledStory(): ReactElement {
   );
 }
 
-export function CheckboxSolid(): ReactElement {
+export function CheckboxSolid(): JSX.Element {
   const [checked, setChecked] = useState<boolean>(false);
 
   return (
@@ -119,7 +119,7 @@ export function CheckboxSolid(): ReactElement {
 }
 
 // StartElement
-export function CheckboxStartElement(): ReactElement {
+export function CheckboxStartElement(): JSX.Element {
   const [checked, setChecked] = useState<boolean>(false);
 
   return (
@@ -145,7 +145,7 @@ export function CheckboxStartElement(): ReactElement {
 }
 
 // EndElement
-export function CheckboxEndElement(): ReactElement {
+export function CheckboxEndElement(): JSX.Element {
   const [checked, setChecked] = useState<boolean>(false);
 
   return (
diff --git a/docs/src/components/EditText/EditTextStories.tsx b/docs/src/components/EditText/EditTextStories.tsx
index b8db1047..cfef0c8d 100644
--- a/docs/src/components/EditText/EditTextStories.tsx
+++ b/docs/src/components/EditText/EditTextStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -32,7 +32,7 @@ const initialProps: EditTextProps = {
   value: '',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -48,7 +48,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const EditTextStory: Story<EditTextProps> = (args): ReactElement => {
+const EditTextStory: Story<EditTextProps> = (args): JSX.Element => {
   const [value, setValue] = useState<string>('');
 
   return (
diff --git a/docs/src/components/Fab/FabStories.tsx b/docs/src/components/Fab/FabStories.tsx
index 10c01aab..1eca1bee 100644
--- a/docs/src/components/Fab/FabStories.tsx
+++ b/docs/src/components/Fab/FabStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -21,7 +21,7 @@ const initialProps: FabProps = {
   isActive: true,
 };
 
-const Container = ({style, children}): ReactElement => {
+const Container = ({style, children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -40,7 +40,7 @@ const Container = ({style, children}): ReactElement => {
   );
 };
 
-const FabStory: Story<FabProps> = (args): ReactElement => {
+const FabStory: Story<FabProps> = (args): JSX.Element => {
   const [isActive, setIsActive] = useState(false);
 
   return (
diff --git a/docs/src/components/Icon/IconStories.tsx b/docs/src/components/Icon/IconStories.tsx
index debe0a58..71f870cc 100644
--- a/docs/src/components/Icon/IconStories.tsx
+++ b/docs/src/components/Icon/IconStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -25,7 +25,7 @@ const initialProps: IconProps = {
   name: 'Airplane',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -41,7 +41,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const IconStory: Story<IconProps> = (args): ReactElement => {
+const IconStory: Story<IconProps> = (args): JSX.Element => {
   return (
     <Container>
       <Icon {...args} />
@@ -53,7 +53,7 @@ export const IconTemplate = IconStory.bind({});
 IconTemplate.args = initialProps;
 
 // IconList
-export function IconList(): ReactElement {
+export function IconList(): JSX.Element {
   const [searchText, setSearchText] = useState('');
   const filteredIcons = (doobooIconList as IconNames).filter((icon) =>
     icon.toLocaleLowerCase().includes(searchText.toLocaleLowerCase()),
@@ -91,7 +91,7 @@ export function IconList(): ReactElement {
             gap: 12px;
           `}
         >
-          {filteredIcons.map((icon): ReactElement => {
+          {filteredIcons.map((icon): JSX.Element => {
             return (
               <View
                 key={icon}
diff --git a/docs/src/components/IconButton/IconButtonStories.tsx b/docs/src/components/IconButton/IconButtonStories.tsx
index 654ff701..a16648f0 100644
--- a/docs/src/components/IconButton/IconButtonStories.tsx
+++ b/docs/src/components/IconButton/IconButtonStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {action} from '@storybook/addon-actions';
 import type {Meta, Story} from '@storybook/react/types-6-0';
 import {DoobooProvider, IconButton} from 'dooboo-ui';
@@ -17,7 +17,7 @@ const initialProps: IconButtonProps = {
   icon: 'Airplane',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -27,7 +27,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const IconButtonStory: Story<IconButtonProps> = (args): ReactElement => {
+const IconButtonStory: Story<IconButtonProps> = (args): JSX.Element => {
   return (
     <Container>
       <IconButton {...args} />
diff --git a/docs/src/components/LoadingIndicator/LoadingIndicatorStories.tsx b/docs/src/components/LoadingIndicator/LoadingIndicatorStories.tsx
index 61787371..200ee199 100644
--- a/docs/src/components/LoadingIndicator/LoadingIndicatorStories.tsx
+++ b/docs/src/components/LoadingIndicator/LoadingIndicatorStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
 import type {Meta, Story} from '@storybook/react/types-6-0';
@@ -15,7 +15,7 @@ type LoadingIndicatorProps = ComponentProps<typeof LoadingIndicator>;
 
 const initialProps: LoadingIndicatorProps = {};
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -33,7 +33,7 @@ const Container = ({children}): ReactElement => {
 
 const LoadingIndicatorStory: Story<LoadingIndicatorProps> = (
   args,
-): ReactElement => {
+): JSX.Element => {
   return (
     <Container>
       <LoadingIndicator {...args} />
diff --git a/docs/src/components/RadioGroup/RadioGroupStories.tsx b/docs/src/components/RadioGroup/RadioGroupStories.tsx
index 67d28d21..61b2e4f2 100644
--- a/docs/src/components/RadioGroup/RadioGroupStories.tsx
+++ b/docs/src/components/RadioGroup/RadioGroupStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -19,7 +19,7 @@ const initialProps: RadioGroupProps = {
   selectedValue: 'Option 1',
 };
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -35,7 +35,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const RadioGroupStory: Story<RadioGroupProps> = (args): ReactElement => {
+const RadioGroupStory: Story<RadioGroupProps> = (args): JSX.Element => {
   const [selectedValue, setSelectedValue] = useState(
     args.selectedValue as string,
   );
diff --git a/docs/src/components/SwitchToggle/SwitchToggleStories.tsx b/docs/src/components/SwitchToggle/SwitchToggleStories.tsx
index 7085296b..a5e52086 100644
--- a/docs/src/components/SwitchToggle/SwitchToggleStories.tsx
+++ b/docs/src/components/SwitchToggle/SwitchToggleStories.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import {useState} from 'react';
 import {View} from 'react-native';
 import {css} from '@emotion/native';
@@ -16,7 +16,7 @@ type SwitchToggleProps = ComponentProps<typeof SwitchToggle>;
 
 const initialProps: SwitchToggleProps = {isOn: false};
 
-const Container = ({children}): ReactElement => {
+const Container = ({children}): JSX.Element => {
   const isDark = useDarkMode();
 
   return (
@@ -32,7 +32,7 @@ const Container = ({children}): ReactElement => {
   );
 };
 
-const SwitchToggleStory: Story<SwitchToggleProps> = (args): ReactElement => {
+const SwitchToggleStory: Story<SwitchToggleProps> = (args): JSX.Element => {
   const [isOn, setIsOn] = useState(args.isOn);
 
   return (
diff --git a/main/modals/AlertDialog/index.tsx b/main/modals/AlertDialog/index.tsx
index da934aae..901f7af8 100644
--- a/main/modals/AlertDialog/index.tsx
+++ b/main/modals/AlertDialog/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {
   cloneElement,
   forwardRef,
@@ -68,11 +67,11 @@ export type AlertDialogStyles = {
 
 export type AlertDialogOptions = {
   styles?: AlertDialogStyles;
-  title?: string | ReactElement;
-  body?: string | ReactElement;
+  title?: string | JSX.Element;
+  body?: string | JSX.Element;
   backdropOpacity?: number;
   closeOnTouchOutside?: boolean;
-  actions?: ReactElement[];
+  actions?: JSX.Element[];
 };
 
 export type AlertDialogContext = {
@@ -83,7 +82,7 @@ export type AlertDialogContext = {
 function AlertDialog(
   {style}: AlertDialogProps,
   ref: React.Ref<AlertDialogContext>,
-): ReactElement {
+): JSX.Element {
   const [options, setOptions] = useState<AlertDialogOptions | null>(null);
   const [visible, setVisible] = useState(false);
   const {theme, themeType} = useTheme();
diff --git a/main/modals/Snackbar/index.tsx b/main/modals/Snackbar/index.tsx
index 8d000a02..215f01c6 100644
--- a/main/modals/Snackbar/index.tsx
+++ b/main/modals/Snackbar/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {forwardRef, useImperativeHandle, useState} from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {Modal, Platform, StyleSheet} from 'react-native';
@@ -80,7 +79,7 @@ function clearTimer(): void {
 function Snackbar(
   {style}: SnackbarProps,
   ref: React.Ref<SnackbarContext>,
-): ReactElement {
+): JSX.Element {
   const [options, setOptions] = useState<SnackbarOptions | null>(null);
   const [visible, setVisible] = useState(false);
   const {theme} = useTheme();
diff --git a/main/providers/index.tsx b/main/providers/index.tsx
index a4bb89c2..7e470287 100644
--- a/main/providers/index.tsx
+++ b/main/providers/index.tsx
@@ -1,5 +1,5 @@
-import type {MutableRefObject, ReactElement} from 'react';
-import React, {useEffect, useRef, useState} from 'react';
+import type {MutableRefObject} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {ThemeContext, ThemeProps} from '@dooboo-ui/theme';
 import {ThemeProvider, useTheme} from '@dooboo-ui/theme';
@@ -22,7 +22,7 @@ export type DoobooContext = {
 } & ThemeContext;
 
 export type DoobooProviderProps = {
-  children?: ReactElement;
+  children?: JSX.Element;
   themeConfig?: Omit<ThemeProps, 'children'>;
   snackbarConfig?: SnackbarOptions;
 };
@@ -31,7 +31,7 @@ const [useCtx, Provider] = createCtx<DoobooContext>(
   'dooboo-ui modals should be used within DoobooProvider.',
 );
 
-function DoobooProvider(props: DoobooProviderProps): React.ReactElement {
+function DoobooProvider(props: DoobooProviderProps): JSX.Element {
   const [assetLoaded, setAssetLoaded] = useState(false);
 
   useEffect(() => {
@@ -99,7 +99,7 @@ function DoobooProvider(props: DoobooProviderProps): React.ReactElement {
   );
 }
 
-function DoobooWithThemeProvider(props: DoobooProviderProps): ReactElement {
+function DoobooWithThemeProvider(props: DoobooProviderProps): JSX.Element {
   return (
     <ThemeProvider {...props.themeConfig}>
       <DoobooProvider {...props} />
diff --git a/main/uis/Accordion/AccordionItem.tsx b/main/uis/Accordion/AccordionItem.tsx
index c208dad6..7bf0001a 100644
--- a/main/uis/Accordion/AccordionItem.tsx
+++ b/main/uis/Accordion/AccordionItem.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React, {useEffect, useRef, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
@@ -42,7 +41,7 @@ type Props<T, K> = Omit<AccordionBaseProps<T, K>, 'data' | 'style'> & {
   data: AccordionItemDataType<string, string> | AccordionItemDataType<T, K>;
 };
 
-export function AccordionItem<T, K>(props: Props<T, K>): ReactElement {
+export function AccordionItem<T, K>(props: Props<T, K>): JSX.Element {
   const {
     testID,
     data: data,
diff --git a/main/uis/Accordion/__tests__/Accordion.test.tsx b/main/uis/Accordion/__tests__/Accordion.test.tsx
index 9ea46d47..2dbb5c6a 100644
--- a/main/uis/Accordion/__tests__/Accordion.test.tsx
+++ b/main/uis/Accordion/__tests__/Accordion.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {Text} from 'react-native';
 import type {RenderAPI} from '@testing-library/react-native';
@@ -8,7 +7,7 @@ import {createComponent, createTestProps} from '../../../../test/testUtils';
 import {Accordion} from '../../..';
 
 let props: any;
-let component: ReactElement;
+let component: JSX.Element;
 let testingLib: RenderAPI;
 
 const data: any[] = [
diff --git a/main/uis/Accordion/index.tsx b/main/uis/Accordion/index.tsx
index 5d93d18e..99d00303 100644
--- a/main/uis/Accordion/index.tsx
+++ b/main/uis/Accordion/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import styled from '@emotion/native';
 
@@ -27,15 +26,15 @@ export type AccordionBaseProps<T = string, K = string> = {
   animDuration?: number;
   activeOpacity?: number;
   toggleElementPosition?: 'left' | 'right';
-  toggleElement?: ReactElement | null;
-  renderTitle?: (title: T) => ReactElement;
-  renderItem?: (body: K) => ReactElement;
+  toggleElement?: JSX.Element | null;
+  renderTitle?: (title: T) => JSX.Element;
+  renderItem?: (body: K) => JSX.Element;
   onPressItem?: (title: T | string, body: K | string) => void;
 };
 
 export type AccordionProps<T = string, K = string> = AccordionBaseProps<T, K>;
 
-export function Accordion<T, K>(props: AccordionProps<T, K>): ReactElement {
+export function Accordion<T, K>(props: AccordionProps<T, K>): JSX.Element {
   const {style, toggleElementPosition = 'right', data, ...rest} = props;
 
   return (
diff --git a/main/uis/Button/__tests__/Button.test.tsx b/main/uis/Button/__tests__/Button.test.tsx
index 2513dfa6..1a34dddf 100644
--- a/main/uis/Button/__tests__/Button.test.tsx
+++ b/main/uis/Button/__tests__/Button.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {Text} from 'react-native';
 import type {ThemeType} from '@dooboo-ui/theme';
@@ -24,7 +23,7 @@ const Component = ({
 }: {
   props?: ButtonProps;
   themeType?: ThemeType;
-}): ReactElement =>
+}): JSX.Element =>
   createComponent(<Button onPress={jest.fn} {...props} />, themeType);
 
 describe('[Button]', () => {
diff --git a/main/uis/Button/index.tsx b/main/uis/Button/index.tsx
index 36dfff81..72854ce3 100644
--- a/main/uis/Button/index.tsx
+++ b/main/uis/Button/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement, ReactNode} from 'react';
 import React, {useCallback, useRef} from 'react';
 import type {
   Insets,
@@ -125,11 +124,11 @@ export type Props = {
   disabled?: boolean;
   loading?: boolean;
   loadingColor?: string;
-  loadingElement?: ReactElement;
-  text?: string | ReactElement;
+  loadingElement?: JSX.Element;
+  text?: string | JSX.Element;
   borderRadius?: number;
-  startElement?: ReactElement;
-  endElement?: ReactElement;
+  startElement?: JSX.Element;
+  endElement?: JSX.Element;
   style?: StyleProp<Omit<ViewStyle, 'borderRadius' | 'padding'>>;
   styles?: Styles;
   onPress?: TouchableHighlightProps['onPress'];
@@ -141,7 +140,7 @@ export type Props = {
   hitSlop?: null | Insets | number | undefined;
 };
 
-export function Button(props: Props): ReactElement {
+export function Button(props: Props): JSX.Element {
   const {
     testID,
     type = 'solid',
@@ -230,12 +229,12 @@ export function Button(props: Props): ReactElement {
 
   const renderContainer = useCallback(
     ({
-      childView,
+      children,
       loadingView,
     }: {
-      childView: ReactNode;
-      loadingView: ReactNode;
-    }): ReactElement => {
+      children: JSX.Element;
+      loadingView: JSX.Element;
+    }): JSX.Element => {
       return (
         <ButtonContainer
           testID={loading ? 'loading-view' : 'button-container'}
@@ -259,7 +258,7 @@ export function Button(props: Props): ReactElement {
               opacity: ${loading ? '0' : '1'};
             `}
           >
-            {childView}
+            {children}
           </View>
           <View
             style={css`
@@ -347,7 +346,7 @@ export function Button(props: Props): ReactElement {
       {...touchableHighlightProps}
     >
       {renderContainer({
-        childView: ChildView,
+        children: ChildView,
         loadingView: LoadingView,
       })}
     </TouchableHighlight>
diff --git a/main/uis/ButtonGroup/__tests__/ButtonGroup.test.tsx b/main/uis/ButtonGroup/__tests__/ButtonGroup.test.tsx
index 897e825d..2ef7c612 100644
--- a/main/uis/ButtonGroup/__tests__/ButtonGroup.test.tsx
+++ b/main/uis/ButtonGroup/__tests__/ButtonGroup.test.tsx
@@ -1,4 +1,4 @@
-import type {ComponentProps, ReactElement} from 'react';
+import type {ComponentProps} from 'react';
 import React from 'react';
 import {light} from '@dooboo-ui/theme';
 import type {RenderAPI} from '@testing-library/react-native';
@@ -9,7 +9,7 @@ import {ButtonGroup} from '../../..';
 
 let testingLib: RenderAPI;
 
-const Component = (props?: ComponentProps<typeof ButtonGroup>): ReactElement =>
+const Component = (props?: ComponentProps<typeof ButtonGroup>): JSX.Element =>
   createComponent(
     <ButtonGroup
       options={['Option1', 'Option2', 'Option3']}
diff --git a/main/uis/ButtonGroup/index.tsx b/main/uis/ButtonGroup/index.tsx
index e4e37814..401eb2da 100644
--- a/main/uis/ButtonGroup/index.tsx
+++ b/main/uis/ButtonGroup/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {useState} from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {Text, View} from 'react-native';
@@ -47,8 +46,8 @@ type Styles = {
 type ButtonGroupProps = {
   testID?: string;
   options: string[];
-  startElement?: ReactElement;
-  endElement?: ReactElement;
+  startElement?: JSX.Element;
+  endElement?: JSX.Element;
   initialValue?: string;
   onValueChange?: (selected: string) => void;
   color?: Omit<keyof DoobooTheme['button'], 'light'>;
@@ -66,7 +65,7 @@ export function ButtonGroup({
   endElement,
   style,
   styles,
-}: ButtonGroupProps): ReactElement {
+}: ButtonGroupProps): JSX.Element {
   if (typeof initialValue !== 'string') {
     // eslint-disable-next-line no-console
     console.warn('initialValue must be string');
diff --git a/main/uis/Checkbox/__tests__/Checkbox.test.tsx b/main/uis/Checkbox/__tests__/Checkbox.test.tsx
index 93198145..319053ad 100644
--- a/main/uis/Checkbox/__tests__/Checkbox.test.tsx
+++ b/main/uis/Checkbox/__tests__/Checkbox.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {View} from 'react-native';
 import {light} from '@dooboo-ui/theme';
@@ -11,7 +10,7 @@ import {Checkbox} from '../../..';
 
 let testingLib: RenderAPI;
 
-const Component = (props?: CheckboxProps): ReactElement =>
+const Component = (props?: CheckboxProps): JSX.Element =>
   createComponent(<Checkbox {...props} />);
 
 describe('[Checkbox]', () => {
diff --git a/main/uis/Checkbox/index.tsx b/main/uis/Checkbox/index.tsx
index 05159ee2..82c6d67a 100644
--- a/main/uis/Checkbox/index.tsx
+++ b/main/uis/Checkbox/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {useEffect, useRef} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {Animated, Platform, View} from 'react-native';
@@ -31,8 +30,8 @@ export interface CheckboxProps {
   color?: CheckboxColor;
   disabled?: boolean;
   checked?: boolean;
-  endElement?: React.ReactElement;
-  startElement?: React.ReactElement;
+  endElement?: JSX.Element;
+  startElement?: JSX.Element;
 }
 
 const Container = styled.TouchableOpacity`
@@ -73,7 +72,7 @@ export function Checkbox({
   disabled = false,
   checked = false,
   onPress,
-}: CheckboxProps): ReactElement {
+}: CheckboxProps): JSX.Element {
   const animatedValue = new Animated.Value(0);
   const fadeAnim = useRef(animatedValue).current;
   const scaleAnim = useRef(animatedValue).current;
diff --git a/main/uis/CustomPressable.tsx b/main/uis/CustomPressable.tsx
index 9c907183..1ac5ad99 100644
--- a/main/uis/CustomPressable.tsx
+++ b/main/uis/CustomPressable.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import type {PressableProps, StyleProp, ViewStyle} from 'react-native';
 import {Pressable} from 'react-native';
 import {useTheme} from '@dooboo-ui/theme';
@@ -6,7 +5,7 @@ import {css} from '@emotion/native';
 
 export default function CustomPressable(
   props: PressableProps & {style?: StyleProp<ViewStyle>},
-): ReactElement {
+): JSX.Element {
   const {children, style, hitSlop} = props;
   const {theme} = useTheme();
 
diff --git a/main/uis/EditText/__tests__/EditText.test.tsx b/main/uis/EditText/__tests__/EditText.test.tsx
index 4ef56ad3..3e6ec577 100644
--- a/main/uis/EditText/__tests__/EditText.test.tsx
+++ b/main/uis/EditText/__tests__/EditText.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {Text} from 'react-native';
 import RNWebHooks from 'react-native-web-hooks';
@@ -16,7 +15,7 @@ jest.mock('react-native-web-hooks', () => ({
 
 let testingLib: RenderAPI;
 
-const Component = (editProps?: EditTextProps): ReactElement =>
+const Component = (editProps?: EditTextProps): JSX.Element =>
   createComponent(<EditText {...editProps} />);
 
 describe('[EditText]', () => {
@@ -61,7 +60,7 @@ describe('[EditText]', () => {
       });
 
       it('renders custom label style', async () => {
-        const renderCustomLabel = (): ReactElement => {
+        const renderCustomLabel = (): JSX.Element => {
           return (
             <Text
               style={{
@@ -279,7 +278,7 @@ describe('[EditText]', () => {
     });
 
     it('should have render custom error', () => {
-      const renderCustomError = (): ReactElement => <Text>custom error</Text>;
+      const renderCustomError = (): JSX.Element => <Text>custom error</Text>;
 
       testingLib = render(
         Component({
diff --git a/main/uis/EditText/index.tsx b/main/uis/EditText/index.tsx
index 06e7f1e4..bf2b9249 100644
--- a/main/uis/EditText/index.tsx
+++ b/main/uis/EditText/index.tsx
@@ -1,4 +1,4 @@
-import type {MutableRefObject, ReactElement, ReactNode, RefObject} from 'react';
+import type {MutableRefObject, ReactNode, RefObject} from 'react';
 import React, {isValidElement, useRef, useState} from 'react';
 import type {
   StyleProp,
@@ -36,10 +36,10 @@ export type EditTextStatus =
   | 'hovered'
   | 'basic';
 
-type RenderType = (stats: EditTextStatus) => ReactElement;
+type RenderType = (stats: EditTextStatus) => JSX.Element;
 
 type CustomRenderType =
-  | (({color, status}: {color: string; status: EditTextStatus}) => ReactElement)
+  | (({color, status}: {color: string; status: EditTextStatus}) => JSX.Element)
   | null;
 
 export type EditTextProps = {
@@ -53,8 +53,8 @@ export type EditTextProps = {
   // Components
   label?: string | RenderType;
   error?: string | RenderType;
-  startElement?: ReactElement | CustomRenderType;
-  endElement?: ReactElement | CustomRenderType;
+  startElement?: JSX.Element | CustomRenderType;
+  endElement?: JSX.Element | CustomRenderType;
 
   direction?: 'row' | 'column';
   decoration?: 'underline' | 'boxed';
@@ -106,7 +106,7 @@ export type EditTextProps = {
   };
 };
 
-export function EditText(props: EditTextProps): ReactElement {
+export function EditText(props: EditTextProps): JSX.Element {
   const {
     testID,
     inputRef: givenInputRef,
@@ -178,9 +178,9 @@ export function EditText(props: EditTextProps): ReactElement {
     ? 'focused'
     : 'basic';
 
-  const renderLabel = (): ReactElement | null => {
+  const renderLabel = (): JSX.Element | null => {
     // eslint-disable-next-line react/no-unstable-nested-components
-    const Wrapper = ({children}: {children: ReactNode}): ReactElement => {
+    const Wrapper = ({children}: {children: ReactNode}): JSX.Element => {
       return (
         <View
           style={css`
@@ -226,7 +226,7 @@ export function EditText(props: EditTextProps): ReactElement {
     ) : null;
   };
 
-  const renderContainer = (children: ReactNode): ReactElement => {
+  const renderContainer = (children: ReactNode): JSX.Element => {
     return (
       <TouchableWithoutFeedback
         testID="container-touch"
@@ -265,7 +265,7 @@ export function EditText(props: EditTextProps): ReactElement {
     );
   };
 
-  const renderInput = (): ReactElement | null => {
+  const renderInput = (): JSX.Element | null => {
     return (
       <View
         style={[
@@ -364,7 +364,7 @@ export function EditText(props: EditTextProps): ReactElement {
     );
   };
 
-  const renderError = (): ReactElement | null => {
+  const renderError = (): JSX.Element | null => {
     return error ? (
       typeof error === 'string' ? (
         <Text
@@ -385,7 +385,7 @@ export function EditText(props: EditTextProps): ReactElement {
     ) : null;
   };
 
-  const renderCounter = (): ReactElement | null => {
+  const renderCounter = (): JSX.Element | null => {
     if (hideCounter) {
       return null;
     }
diff --git a/main/uis/Fab/__tests__/Fab.test.tsx b/main/uis/Fab/__tests__/Fab.test.tsx
index fb33059b..e644ed8f 100644
--- a/main/uis/Fab/__tests__/Fab.test.tsx
+++ b/main/uis/Fab/__tests__/Fab.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {fireEvent, render} from '@testing-library/react-native';
 
@@ -6,7 +5,7 @@ import {createComponent} from '../../../../test/testUtils';
 import type {IconName} from '../../..';
 import {Fab} from '../../..';
 
-const Component = (props): ReactElement => createComponent(<Fab {...props} />);
+const Component = (props): JSX.Element => createComponent(<Fab {...props} />);
 
 describe('[Fab]', () => {
   it('should render', async () => {
diff --git a/main/uis/Fab/index.tsx b/main/uis/Fab/index.tsx
index dd2ed00d..a1f03acf 100644
--- a/main/uis/Fab/index.tsx
+++ b/main/uis/Fab/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {useLayoutEffect, useMemo, useRef} from 'react';
 import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import {Animated, Easing, View} from 'react-native';
@@ -37,7 +36,7 @@ function FloatingActionButtons({
   buttonSize = 'medium',
   gap = 6,
   animationDuration = 200,
-}: FabProps): ReactElement {
+}: FabProps): JSX.Element {
   const {Fab, FabItem} = styles ?? {};
 
   const spinValue = useRef(new Animated.Value(0));
diff --git a/main/uis/Hr/__tests__/Hr.test.tsx b/main/uis/Hr/__tests__/Hr.test.tsx
index df52dc40..8b323264 100644
--- a/main/uis/Hr/__tests__/Hr.test.tsx
+++ b/main/uis/Hr/__tests__/Hr.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {View} from 'react-native';
 import type {RenderAPI} from '@testing-library/react-native';
@@ -9,7 +8,7 @@ import {Hr} from '../../..';
 
 let testingLib: RenderAPI;
 
-const Component = (): ReactElement =>
+const Component = (): JSX.Element =>
   createComponent(
     <View>
       <Hr />
diff --git a/main/uis/Icon/__tests__/Icon.test.tsx b/main/uis/Icon/__tests__/Icon.test.tsx
index a7197d5e..ab01af48 100644
--- a/main/uis/Icon/__tests__/Icon.test.tsx
+++ b/main/uis/Icon/__tests__/Icon.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import type {RenderAPI} from '@testing-library/react-native';
 import {render} from '@testing-library/react-native';
@@ -8,7 +7,7 @@ import {Icon} from '../../..';
 
 let testingLib: RenderAPI;
 
-const Component = (): ReactElement => createComponent(<Icon name="Person" />);
+const Component = (): JSX.Element => createComponent(<Icon name="Person" />);
 
 describe('[Icon]', () => {
   it('should render without crashing', () => {
diff --git a/main/uis/IconButton/__tests__/IconButton.test.tsx b/main/uis/IconButton/__tests__/IconButton.test.tsx
index 86fb934a..16605529 100644
--- a/main/uis/IconButton/__tests__/IconButton.test.tsx
+++ b/main/uis/IconButton/__tests__/IconButton.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import type {RenderAPI} from '@testing-library/react-native';
 import {render} from '@testing-library/react-native';
@@ -13,7 +12,7 @@ jest.mock('react-native-web-hooks', () => ({
   useHover: () => true,
 }));
 
-const Component = (props?: Props): ReactElement =>
+const Component = (props?: Props): JSX.Element =>
   createComponent(<IconButton {...props} />);
 
 describe('[IconButton]', () => {
diff --git a/main/uis/IconButton/index.tsx b/main/uis/IconButton/index.tsx
index 4a0e9311..13724541 100644
--- a/main/uis/IconButton/index.tsx
+++ b/main/uis/IconButton/index.tsx
@@ -1,4 +1,4 @@
-import type {FC, ReactElement, ReactNode} from 'react';
+import type {FC, ReactNode} from 'react';
 import React, {useRef} from 'react';
 import type {StyleProp, TouchableHighlightProps, ViewStyle} from 'react-native';
 import {Platform, TouchableHighlight, View} from 'react-native';
@@ -99,9 +99,9 @@ export type IconButtonProps = {
   size?: ButtonSizeType | number;
   disabled?: boolean;
   loading?: boolean;
-  loadingElement?: ReactElement;
+  loadingElement?: JSX.Element;
   icon?: IconName;
-  iconElement?: ReactElement;
+  iconElement?: JSX.Element;
   style?: StyleProp<Omit<ViewStyle, 'borderRadius' | 'padding'>>;
   styles?: Styles;
   onPress?: TouchableHighlightProps['onPress'];
@@ -187,7 +187,7 @@ export const IconButton: FC<IconButtonProps> = (props) => {
     ],
   };
 
-  const renderContainer = (children: ReactNode): ReactElement => {
+  const renderContainer = (children: ReactNode): JSX.Element => {
     return (
       <View
         testID={loading ? 'loading-view' : 'button-container'}
@@ -209,12 +209,12 @@ export const IconButton: FC<IconButtonProps> = (props) => {
     );
   };
 
-  const renderLoading = (): ReactElement =>
+  const renderLoading = (): JSX.Element =>
     loadingElement ?? (
       <LoadingIndicator size="small" color={theme.text.basic} />
     );
 
-  const renderChild = (): ReactElement =>
+  const renderChild = (): JSX.Element =>
     iconElement || (
       <Icon size={iconSize} color={iconColor} name={icon || 'QuestBoxFill'} />
     );
diff --git a/main/uis/LoadingIndicator/__tests__/LoadingIndicator.test.tsx b/main/uis/LoadingIndicator/__tests__/LoadingIndicator.test.tsx
index 7f629dfa..8ed06eb1 100644
--- a/main/uis/LoadingIndicator/__tests__/LoadingIndicator.test.tsx
+++ b/main/uis/LoadingIndicator/__tests__/LoadingIndicator.test.tsx
@@ -6,7 +6,7 @@ import {createComponent, createTestProps} from '../../../../test/testUtils';
 import {LoadingIndicator} from '../../..';
 
 let props: any;
-let component: React.ReactElement;
+let component: JSX.Element;
 
 describe('[LoadingIndicator] render', () => {
   beforeEach(() => {
@@ -23,7 +23,7 @@ describe('[LoadingIndicator] render', () => {
 
   it('should render [customElement]', () => {
     props = createTestProps({
-      renderCustomElement: (): React.ReactElement => <View />,
+      renderCustomElement: (): JSX.Element => <View />,
     });
 
     component = createComponent(<LoadingIndicator {...props} />);
diff --git a/main/uis/LoadingIndicator/index.tsx b/main/uis/LoadingIndicator/index.tsx
index 1812fb57..bee25027 100644
--- a/main/uis/LoadingIndicator/index.tsx
+++ b/main/uis/LoadingIndicator/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import type {
   ImageSourcePropType,
@@ -20,10 +19,10 @@ interface Props {
   color?: string;
   size?: 'small' | 'large';
   imgSource?: string | ImageSourcePropType;
-  customElement?: ReactElement | (() => ReactElement);
+  customElement?: JSX.Element | (() => JSX.Element);
 }
 
-export function LoadingIndicator(props: Props): ReactElement {
+export function LoadingIndicator(props: Props): JSX.Element {
   const {
     customElement,
     style,
diff --git a/main/uis/NetworkImage/__tests__/NetworkImage.test.tsx b/main/uis/NetworkImage/__tests__/NetworkImage.test.tsx
index 7f84d0ac..a17f4b1d 100644
--- a/main/uis/NetworkImage/__tests__/NetworkImage.test.tsx
+++ b/main/uis/NetworkImage/__tests__/NetworkImage.test.tsx
@@ -7,7 +7,7 @@ import {NetworkImage} from '..';
 // import useColorScheme from '@dooboo-ui/theme/useColorScheme';
 
 let props: any;
-let component: React.ReactElement;
+let component: JSX.Element;
 
 describe('[NetworkImage] render', () => {
   beforeEach(() => {
diff --git a/main/uis/NetworkImage/index.tsx b/main/uis/NetworkImage/index.tsx
index 241a4b1b..c2262ec1 100644
--- a/main/uis/NetworkImage/index.tsx
+++ b/main/uis/NetworkImage/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {isValidElement, useCallback, useEffect, useState} from 'react';
 import type {
   ImageProps,
@@ -22,12 +21,12 @@ const Container = styled.View`
 interface Props {
   style?: StyleProp<ViewStyle>;
   url: string | undefined;
-  loadingSource?: ImageRequireSource | ReactElement;
+  loadingSource?: ImageRequireSource | JSX.Element;
   imageProps?: Partial<ImageProps>;
   shouldFixImageRatio?: boolean;
 }
 
-function NetworkImage(props: Props): ReactElement {
+function NetworkImage(props: Props): JSX.Element {
   const {themeType} = useTheme();
   const logo = themeType === 'light' ? PlaceholderLight : PlaceholderDark;
   const {style, url, imageProps = false} = props;
diff --git a/main/uis/ProgressBar/__tests__/ProgressBar.test.tsx b/main/uis/ProgressBar/__tests__/ProgressBar.test.tsx
index 7aee0539..fad9af52 100644
--- a/main/uis/ProgressBar/__tests__/ProgressBar.test.tsx
+++ b/main/uis/ProgressBar/__tests__/ProgressBar.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {light} from '@dooboo-ui/theme';
 import type {RenderAPI} from '@testing-library/react-native';
@@ -10,7 +9,7 @@ import {ProgressBar} from '../../..';
 
 let testingLib: RenderAPI;
 
-const Component = (props?: ProgressBarProps): ReactElement =>
+const Component = (props?: ProgressBarProps): JSX.Element =>
   createComponent(<ProgressBar value={0} {...props} />);
 
 describe('[ProgressBar]', () => {
diff --git a/main/uis/ProgressCircle/index.tsx b/main/uis/ProgressCircle/index.tsx
index a6a9a48d..a3567069 100644
--- a/main/uis/ProgressCircle/index.tsx
+++ b/main/uis/ProgressCircle/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {useMemo, useRef, useState} from 'react';
 import type {TextStyle, ViewStyle} from 'react-native';
 import {Animated} from 'react-native';
@@ -41,7 +40,7 @@ export function ProgressCircle({
   styles,
   progress,
   color = 'info',
-}: Props): ReactElement {
+}: Props): JSX.Element {
   const {
     radius = 30,
     strokeWidth = 5,
diff --git a/main/uis/RadioGroup/RadioButton.tsx b/main/uis/RadioGroup/RadioButton.tsx
index f77a00c2..26a65fdf 100644
--- a/main/uis/RadioGroup/RadioButton.tsx
+++ b/main/uis/RadioGroup/RadioButton.tsx
@@ -32,8 +32,8 @@ export type RadioButtonProps = {
   type?: RadioButtonType;
   disabled?: boolean;
   selected?: boolean;
-  endElement?: React.ReactElement;
-  startElement?: React.ReactElement;
+  endElement?: JSX.Element;
+  startElement?: JSX.Element;
 };
 
 const Container = styled.TouchableOpacity`
diff --git a/main/uis/RadioGroup/__tests__/RadioGroup.test.tsx b/main/uis/RadioGroup/__tests__/RadioGroup.test.tsx
index c253901a..2e525172 100644
--- a/main/uis/RadioGroup/__tests__/RadioGroup.test.tsx
+++ b/main/uis/RadioGroup/__tests__/RadioGroup.test.tsx
@@ -9,7 +9,7 @@ import {RadioButton} from '../RadioButton';
 import {RadioGroup} from '..';
 
 let props: any;
-let component: React.ReactElement;
+let component: JSX.Element;
 let testingLib: RenderAPI;
 
 const data = ['Person', 'Animal', 'Bird', 'Other'];
diff --git a/main/uis/RadioGroup/index.tsx b/main/uis/RadioGroup/index.tsx
index f1a28a75..8aa6aaa2 100644
--- a/main/uis/RadioGroup/index.tsx
+++ b/main/uis/RadioGroup/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import styled from '@emotion/native';
@@ -47,7 +46,7 @@ const Content = styled.View`
 
 function RadioGroupContainer<T>(
   props: Omit<Props<T>, 'selected'>,
-): ReactElement {
+): JSX.Element {
   const {
     title,
     data,
diff --git a/main/uis/Rating.test.tsx b/main/uis/Rating.test.tsx
index 12c7af41..60d0cfbe 100644
--- a/main/uis/Rating.test.tsx
+++ b/main/uis/Rating.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {fireEvent, render} from '@testing-library/react-native';
 
@@ -7,7 +6,7 @@ import {createComponent} from '../../test/testUtils';
 import type {RatingProps} from './Rating';
 import {Rating} from './Rating';
 
-const Component = (props?: RatingProps): ReactElement =>
+const Component = (props?: RatingProps): JSX.Element =>
   createComponent(<Rating {...props} />);
 
 describe('Rating', () => {
diff --git a/main/uis/Rating.tsx b/main/uis/Rating.tsx
index 9843db73..b519acd9 100644
--- a/main/uis/Rating.tsx
+++ b/main/uis/Rating.tsx
@@ -1,5 +1,4 @@
 // React import is needed for expo-web
-import type {ReactElement} from 'react';
 import React, {useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
@@ -49,7 +48,7 @@ export function Rating({
   allowHalfRating = true,
   disabled = false,
   color,
-}: RatingProps): ReactElement {
+}: RatingProps): JSX.Element {
   const [rating, setRating] = useState(initialRating);
   const iconPrefix = iconType === 'star' ? 'Star' : 'QuestBox';
 
@@ -69,7 +68,7 @@ export function Rating({
   }: {
     key: string;
     position: number;
-  }): ReactElement => {
+  }): JSX.Element => {
     const filled = rating >= position + (allowHalfRating ? 0.5 : 0);
     const iconName: IconName = filled ? `${iconPrefix}Fill` : `${iconPrefix}`;
     const halfFilled =
diff --git a/main/uis/StatusbarBrightness/__tests__/StatusBarBrightness.test.tsx b/main/uis/StatusbarBrightness/__tests__/StatusBarBrightness.test.tsx
index 1ff099eb..c691b4b1 100644
--- a/main/uis/StatusbarBrightness/__tests__/StatusBarBrightness.test.tsx
+++ b/main/uis/StatusbarBrightness/__tests__/StatusBarBrightness.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {View} from 'react-native';
 import {ThemeProvider} from '@dooboo-ui/theme';
@@ -10,7 +9,7 @@ import StatusBarBrightness from '..';
 
 let testingLib: RenderAPI;
 
-const Component = (): ReactElement =>
+const Component = (): JSX.Element =>
   createComponent(
     <View>
       <StatusBarBrightness />
diff --git a/main/uis/StatusbarBrightness/index.tsx b/main/uis/StatusbarBrightness/index.tsx
index b323ca60..e64c9807 100644
--- a/main/uis/StatusbarBrightness/index.tsx
+++ b/main/uis/StatusbarBrightness/index.tsx
@@ -1,9 +1,8 @@
-import type {ReactElement} from 'react';
 import type {StatusBarStyle} from 'react-native';
 import {StatusBar} from 'react-native';
 import {useTheme} from '@dooboo-ui/theme';
 
-function StatusBarBrightness(): ReactElement {
+function StatusBarBrightness(): JSX.Element {
   const {themeType} = useTheme();
 
   const statusColor: StatusBarStyle =
diff --git a/main/uis/SwitchToggle/__tests__/SwitchToggle.test.tsx b/main/uis/SwitchToggle/__tests__/SwitchToggle.test.tsx
index 3c8f0122..4909099d 100644
--- a/main/uis/SwitchToggle/__tests__/SwitchToggle.test.tsx
+++ b/main/uis/SwitchToggle/__tests__/SwitchToggle.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {Text} from 'react-native';
 import type {RenderAPI} from '@testing-library/react-native';
@@ -29,7 +28,7 @@ describe('[SwitchToggle]', () => {
     expect(handlePress).toBeCalled();
   });
 
-  const getSwitchToggle = ({isOn}: {isOn: boolean}): ReactElement =>
+  const getSwitchToggle = ({isOn}: {isOn: boolean}): JSX.Element =>
     createComponent(
       <SwitchToggle
         isOn={isOn}
diff --git a/main/uis/SwitchToggle/index.tsx b/main/uis/SwitchToggle/index.tsx
index 1a53f351..95e11397 100644
--- a/main/uis/SwitchToggle/index.tsx
+++ b/main/uis/SwitchToggle/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {useEffect, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {Animated, TouchableOpacity} from 'react-native';
@@ -75,7 +74,7 @@ const largeCircle: ViewStyle = {
   borderRadius: 16,
 };
 
-export function SwitchToggle(props: Props): ReactElement {
+export function SwitchToggle(props: Props): JSX.Element {
   const {
     testID,
     isOn,
diff --git a/main/uis/Typography/__tests__/Typography.test.tsx b/main/uis/Typography/__tests__/Typography.test.tsx
index 03b0995d..e5a06a81 100644
--- a/main/uis/Typography/__tests__/Typography.test.tsx
+++ b/main/uis/Typography/__tests__/Typography.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import {View} from 'react-native';
 import {ThemeProvider} from '@dooboo-ui/theme';
@@ -10,7 +9,7 @@ import {Typography, TypographyInverted} from '..';
 
 let testingLib: RenderAPI;
 
-const Component = (): ReactElement =>
+const Component = (): JSX.Element =>
   createComponent(
     <View>
       <Typography.Title />,
diff --git a/main/utils/guards.ts b/main/utils/guards.ts
index 23cd47af..a6c69e54 100644
--- a/main/utils/guards.ts
+++ b/main/utils/guards.ts
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React, {cloneElement} from 'react';
 import {Image, Text, TextInput, View} from 'react-native';
 import type {StyleProps} from 'react-native-reanimated';
@@ -7,7 +6,7 @@ import {Button} from '../uis/Button';
 import {Icon} from '../uis/Icon';
 
 const getRootElementStyleType = (
-  element: ReactElement,
+  element: JSX.Element,
 ): 'TextStyle' | 'ViewStyle' | 'unknown' => {
   if (React.isValidElement(element)) {
     if (
@@ -32,9 +31,9 @@ const getRootElementStyleType = (
 
 type CloneElemColorsParams = {
   /**
-   * ReactElement to be cloned to shape default colors.
+   * JSX.Element to be cloned to shape default colors.
    */
-  element?: ReactElement;
+  element?: JSX.Element;
   /**
    * Text color to be applied.
    * If not passed, default color will be applied.
@@ -57,14 +56,14 @@ type CloneElemColorsParams = {
  * This function applies default colors to cloned element.
  *
  * @param {CloneElemColorsParams} params
- * @returns {ReactElement} - Cloned element with default colors if exists. Otherwise, null.
+ * @returns {JSX.Element} - Cloned element with default colors if exists. Otherwise, null.
  */
 export const cloneElemWithDefaultColors = ({
   element,
   color,
   backgroundColor,
   style,
-}: CloneElemColorsParams): ReactElement | null => {
+}: CloneElemColorsParams): JSX.Element | null => {
   return element
     ? cloneElement(element, {
         style: [
diff --git a/packages/CalendarCarousel/README.md b/packages/CalendarCarousel/README.md
index cc028316..20df3bb7 100644
--- a/packages/CalendarCarousel/README.md
+++ b/packages/CalendarCarousel/README.md
@@ -145,7 +145,7 @@ It also containes the function renderCalendar() which is described below.
     style={styles.dayContainer}
     data={calendarDates}
     numColumns={7}
-    renderItem ={({ item }): ReactElement => renderDates(item)}
+    renderItem ={({ item }): JSX.Element => renderDates(item)}
     keyExtractor={(item, id): string => id.toString()}
   />
   {renderDayEvents()}
@@ -181,7 +181,7 @@ In addition to rendering the calendar, renderCalendar() renders the dates and th
 Takes the data markedDayEvents that is recieved from the props and renders the events based on that. 
 
 ```tsx
-      const renderEvent = (): ReactElement[] => {
+      const renderEvent = (): JSX.Element[] => {
         return markedDayEvents.map((markedDayEvent, i) => {
           if (markedDates[i] === eventDay &&
             markedMonths.includes(month) &&
diff --git a/packages/CalendarCarousel/index.tsx b/packages/CalendarCarousel/index.tsx
index 2611d131..2fc18411 100644
--- a/packages/CalendarCarousel/index.tsx
+++ b/packages/CalendarCarousel/index.tsx
@@ -1,7 +1,7 @@
 import 'intl';
 import 'intl/locale-data/jsonp/en';
 
-import type {PropsWithChildren, ReactElement} from 'react';
+import type {PropsWithChildren} from 'react';
 import React, {useRef, useState} from 'react';
 import type {
   NativeScrollEvent,
@@ -169,7 +169,7 @@ function CalendarCarousel({
   selectedDate,
   markedDayEvents = [],
   monthFormatter = new Intl.DateTimeFormat('en', {month: 'long'}),
-}: PropsWithChildren<Props>): ReactElement {
+}: PropsWithChildren<Props>): JSX.Element {
   const {theme} = useTheme();
   const scrollRef = useRef<ScrollView>(null);
   const [layoutWidth, setLayoutWidth] = useState(330);
@@ -232,8 +232,8 @@ function CalendarCarousel({
     return onDateChanged?.(update);
   };
 
-  const renderCalendars = (): ReactElement => {
-    const renderCalendar = (displayDate: Date): ReactElement => {
+  const renderCalendars = (): JSX.Element => {
+    const renderCalendar = (displayDate: Date): JSX.Element => {
       const monthName = monthFormatter.format(displayDate);
       const year = displayDate.getFullYear();
       const month = displayDate.getMonth();
@@ -296,7 +296,7 @@ function CalendarCarousel({
         eventYears.selectedEventDate.getFullYear(),
       );
 
-      const renderDates = (dateItem: Date): ReactElement => {
+      const renderDates = (dateItem: Date): JSX.Element => {
         const itemYear = dateItem.getFullYear();
         const itemMonth = dateItem.getMonth();
         const itemDay = dateItem.getDate();
@@ -402,7 +402,7 @@ function CalendarCarousel({
         );
       };
 
-      const renderEvent = (): ReactElement[] => {
+      const renderEvent = (): JSX.Element[] => {
         return markedDayEvents.map((markedDayEvent, i) => {
           if (
             markedDates[i] === eventDay &&
diff --git a/packages/GiftedChat/README.md b/packages/GiftedChat/README.md
index 3ae81480..7dcb971d 100644
--- a/packages/GiftedChat/README.md
+++ b/packages/GiftedChat/README.md
@@ -14,13 +14,13 @@
 | fontColor          |           | string              |         |
 | keyboardOffset     |           | number              |         |
 | renderItem         |           | ListRenderItem<any> |         |
-| ListEmptyComponent |           | ReactElement        |         |
-| renderViewMenu     |           | () => ReactElement  |         |
-| optionView         |           | ReactElement        |         |
+| ListEmptyComponent |           | JSX.Element         |         |
+| renderViewMenu     |           | () => JSX.Element   |         |
+| optionView         |           | JSX.Element         |         |
 | onChangeMessage    |           | Function            |         |
 | placeholder        |           | string              |         |
 | placeholderColor   |           | string              |         |
-| renderSendButton   |           | () => ReactElement  |         |
+| renderSendButton   |           | () => JSX.Element   |         |
 
 ## Installation
 
@@ -86,7 +86,7 @@ yarn add @dooboo-ui/gifted-chat
     chats: Chat[];
   }
 
-  function Screen(props: Props): React.ReactElement {
+  function Screen(props: Props): JSX.Element {
     const { theme } = props;
 
     const [isSending, setIsSending] = useState<boolean>(false);
@@ -164,7 +164,7 @@ yarn add @dooboo-ui/gifted-chat
           }: {
             item: Chat;
             index: number;
-          }): React.ReactElement => {
+          }): JSX.Element => {
             return (
               <ChatListItem
                 prevItem={index > 0 ? chats[index - 1] : undefined}
@@ -182,7 +182,7 @@ yarn add @dooboo-ui/gifted-chat
             />
           }
           ListEmptyComponent={<EmptyListItem>{getString('NO_CONTENT')}</EmptyListItem>}
-          renderViewMenu={(): React.ReactElement => (
+          renderViewMenu={(): JSX.Element => (
             <View
               style={{
                 flexDirection: 'row',
@@ -223,7 +223,7 @@ yarn add @dooboo-ui/gifted-chat
               </TouchableOpacity>
             </View>
           )}
-          renderSendButton={(): React.ReactElement => (
+          renderSendButton={(): JSX.Element => (
             <Button
               testID="btn_chat"
               height={Platform.OS === 'android' ? 40 : undefined}
diff --git a/packages/GiftedChat/index.tsx b/packages/GiftedChat/index.tsx
index 85bdb829..6bed0898 100644
--- a/packages/GiftedChat/index.tsx
+++ b/packages/GiftedChat/index.tsx
@@ -59,21 +59,21 @@ interface Props<T> {
   onEndReached?: () => void;
   keyboardOffset?: number;
   renderItem: ListRenderItem<T>;
-  optionView?: React.ReactElement;
+  optionView?: JSX.Element;
   ListEmptyComponent?:
     | React.ComponentType<any>
-    | React.ReactElement
+    | React.JSX.Element
     | null
     | undefined;
-  renderViewMenu?: () => React.ReactElement;
+  renderViewMenu?: () => JSX.Element;
   message?: string;
   onChangeMessage?: (text: string) => void;
   placeholder?: string;
   placeholderColor?: string;
-  renderSendButton?: () => React.ReactElement;
+  renderSendButton?: () => JSX.Element;
 }
 
-function Shared<T>(props: Props<T>): React.ReactElement {
+function Shared<T>(props: Props<T>): JSX.Element {
   const input1 = useRef<TextInput>();
   const input2 = useRef<TextInput>();
 
@@ -282,12 +282,12 @@ Shared.defaultProps = {
   keyboardOffset: 0,
   optionView: <View />,
   ListEmptyComponent: <View />,
-  renderItem: (): React.ReactElement => <View />,
-  renderViewMenu: (): React.ReactElement => <View />,
+  renderItem: (): JSX.Element => <View />,
+  renderViewMenu: (): JSX.Element => <View />,
   message: '',
   onChangeMessage: (): void => {},
   placeholder: '',
-  renderSendButton: (): React.ReactElement => <View />,
+  renderSendButton: (): JSX.Element => <View />,
 };
 
 export default Shared;
diff --git a/packages/PinchZoom/index.tsx b/packages/PinchZoom/index.tsx
index 22d33d13..18cca9ec 100644
--- a/packages/PinchZoom/index.tsx
+++ b/packages/PinchZoom/index.tsx
@@ -1,4 +1,4 @@
-import type {PropsWithChildren, ReactElement, Ref} from 'react';
+import type {PropsWithChildren, Ref} from 'react';
 import React, {
   forwardRef,
   useEffect,
@@ -63,7 +63,7 @@ function getRelativeTouchesCenterPosition(
   };
 }
 
-function PinchZoom(props: Props, ref: Ref<PinchZoomRef>): ReactElement {
+function PinchZoom(props: Props, ref: Ref<PinchZoomRef>): JSX.Element {
   const {
     style,
     children,
diff --git a/packages/__tests__/CalendarCarousel.test.tsx b/packages/__tests__/CalendarCarousel.test.tsx
index 82272fce..d1c7d3ba 100644
--- a/packages/__tests__/CalendarCarousel.test.tsx
+++ b/packages/__tests__/CalendarCarousel.test.tsx
@@ -1,14 +1,12 @@
 import 'react-native';
 
-// import * as React from 'react';
-
 // import Calendar from '../CalendarCarousel';
 // import {createComponent} from '../../test/testUtils';
 // import renderer from 'react-test-renderer';
 
 // let props: any;
 
-// const component = (): React.ReactElement => {
+// const component = (): JSX.Element => {
 //   return <Calendar {...props} />;
 // };
 
diff --git a/packages/__tests__/GiftedChat.test.tsx b/packages/__tests__/GiftedChat.test.tsx
index 8e075ad6..38afe508 100644
--- a/packages/__tests__/GiftedChat.test.tsx
+++ b/packages/__tests__/GiftedChat.test.tsx
@@ -8,7 +8,7 @@ import {createTestProps} from '../../test/testUtils';
 import GiftedChatInput from '../GiftedChat';
 
 let props: any;
-let component: React.ReactElement;
+let component: JSX.Element;
 let testingLib: RenderAPI;
 
 jest.useFakeTimers();
diff --git a/packages/theme/ThemeProvider.test.tsx b/packages/theme/ThemeProvider.test.tsx
index 2b333c5c..4daa581c 100644
--- a/packages/theme/ThemeProvider.test.tsx
+++ b/packages/theme/ThemeProvider.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import {Context as ResponsiveContext} from 'react-responsive';
 import {useTheme as useThemeEmotion} from '@emotion/react';
 import {act, renderHook} from '@testing-library/react-hooks';
@@ -18,7 +17,7 @@ describe('doobooContext', () => {
       const themeType = 'dark';
       const customDarkTheme = {primary: 'pink'};
 
-      const wrapper = ({children}): ReactElement => (
+      const wrapper = ({children}): JSX.Element => (
         <ThemeProvider
           initialThemeType={themeType}
           customTheme={{dark: customDarkTheme}}
@@ -59,7 +58,7 @@ describe('doobooContext', () => {
     });
 
     describe('media', () => {
-      const wrapper = ({children}): ReactElement => (
+      const wrapper = ({children}): JSX.Element => (
         <ResponsiveContext.Provider value={given.deviceInfo}>
           <ThemeProvider>{children}</ThemeProvider>
         </ResponsiveContext.Provider>
diff --git a/packages/theme/ThemeProvider.tsx b/packages/theme/ThemeProvider.tsx
index 7c4b6126..fbe51672 100644
--- a/packages/theme/ThemeProvider.tsx
+++ b/packages/theme/ThemeProvider.tsx
@@ -1,6 +1,5 @@
 import '@expo/match-media';
 
-import type {ReactElement} from 'react';
 import {useEffect, useState} from 'react';
 import type {ColorSchemeName} from 'react-native';
 import {useMediaQuery} from 'react-responsive';
@@ -29,7 +28,7 @@ export type ThemeContext = {
 const [useCtx, DoobooProvider] = createDoobooContext<ThemeContext>();
 
 export type ThemeProps = {
-  children?: ReactElement;
+  children?: JSX.Element;
   initialThemeType?: ThemeType;
   customTheme?: ThemeParam;
   /*
@@ -101,7 +100,7 @@ export function ThemeProvider({
   initialThemeType,
   customTheme = {},
   responsiveDesignMode = 'mobile-first',
-}: ThemeProps): ReactElement {
+}: ThemeProps): JSX.Element {
   const isPortrait = useMediaQuery({orientation: 'portrait'});
 
   const isMobile = useMediaQuery(
diff --git a/packages/theme/createDoobooContext.test.tsx b/packages/theme/createDoobooContext.test.tsx
index fc1a1a05..434b6e6d 100644
--- a/packages/theme/createDoobooContext.test.tsx
+++ b/packages/theme/createDoobooContext.test.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import {renderHook} from '@testing-library/react-hooks';
 
 import createDoobooContext from './createDoobooContext';
@@ -8,7 +7,7 @@ describe('createDoobooContext', () => {
 
   context('when theme provider exists', () => {
     it('returns context value provided by provider', () => {
-      const wrapper = ({children}): ReactElement => (
+      const wrapper = ({children}): JSX.Element => (
         <Provider value="context">{children}</Provider>
       );
 
diff --git a/stories/Common.tsx b/stories/Common.tsx
index 0210fc97..5e2724a1 100644
--- a/stories/Common.tsx
+++ b/stories/Common.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement, ReactNode} from 'react';
 // Caveat: Expo web needs React to be imported
 import React, {useState} from 'react';
 import {StatusBar, View} from 'react-native';
@@ -14,10 +13,10 @@ import {
 import {StoryContainer} from './GlobalStyles';
 
 type ContainerProps = {
-  children: ReactNode;
+  children: JSX.Element;
 };
 
-export function StoryWrapper({children}: ContainerProps): ReactElement {
+export function StoryWrapper({children}: ContainerProps): JSX.Element {
   const {themeType, changeThemeType, assetLoaded} = useDooboo();
   const [on, off] = useState(themeType === 'dark');
 
@@ -51,7 +50,7 @@ export function StoryWrapper({children}: ContainerProps): ReactElement {
   );
 }
 
-export function renderStory(el: ReactElement): ReactElement {
+export function renderStory(el: JSX.Element): JSX.Element {
   return (
     <DoobooProvider>
       <StoryWrapper>{el}</StoryWrapper>
diff --git a/stories/modals/AlertDialogStories/AlertDialogBasicStory.tsx b/stories/modals/AlertDialogStories/AlertDialogBasicStory.tsx
index a7f82ba4..83708ae6 100644
--- a/stories/modals/AlertDialogStories/AlertDialogBasicStory.tsx
+++ b/stories/modals/AlertDialogStories/AlertDialogBasicStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import styled from '@emotion/native';
@@ -10,7 +9,7 @@ const Container = styled.SafeAreaView`
   background-color: ${({theme}) => theme.bg.basic};
 `;
 
-function AlertDialogBasicStory(): ReactElement {
+function AlertDialogBasicStory(): JSX.Element {
   const {alertDialog} = useDooboo();
 
   return (
diff --git a/stories/modals/SnackbarStories/SnackbarBasicStory.tsx b/stories/modals/SnackbarStories/SnackbarBasicStory.tsx
index 0340f532..f784c648 100644
--- a/stories/modals/SnackbarStories/SnackbarBasicStory.tsx
+++ b/stories/modals/SnackbarStories/SnackbarBasicStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import styled from '@emotion/native';
@@ -10,7 +9,7 @@ const Container = styled.SafeAreaView`
   background-color: ${({theme}) => theme.bg.basic};
 `;
 
-function SnackbarBasicStory(): ReactElement {
+function SnackbarBasicStory(): JSX.Element {
   const {snackbar} = useDooboo();
 
   return (
diff --git a/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx b/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx
index e4fa26e8..142ade84 100644
--- a/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx
+++ b/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx
@@ -16,7 +16,7 @@ const Container = styled.SafeAreaView`
 
 const date = new Date();
 
-function CalendarCarouselBasicStory(): React.ReactElement {
+function CalendarCarouselBasicStory(): JSX.Element {
   const [currentDate, setCurrentDate] = useState<Date>(date);
   const [selectedDate, setSelectedDate] = useState<Date>();
   const monthFormatter = new Intl.DateTimeFormat('default', {month: 'long'});
diff --git a/stories/packages/PinchZoomStories/PinchZoomArticleStory.tsx b/stories/packages/PinchZoomStories/PinchZoomArticleStory.tsx
index 5f0efebb..51dcda25 100644
--- a/stories/packages/PinchZoomStories/PinchZoomArticleStory.tsx
+++ b/stories/packages/PinchZoomStories/PinchZoomArticleStory.tsx
@@ -1,6 +1,4 @@
 // Caveat: Expo web needs React to be imported
-import type {ReactElement} from 'react';
-import React from 'react';
 import styled from '@emotion/native';
 
 import {PinchZoom} from '../../../packages/PinchZoom/lib';
@@ -13,7 +11,7 @@ const ContentText = styled.Text`
   font-size: 14px;
 `;
 
-const PinchZoomArticleStory = (): ReactElement => {
+const PinchZoomArticleStory = (): JSX.Element => {
   return (
     <PinchZoom style={{width: '100%', backgroundColor: '#eee', padding: 10}}>
       <TitleText>Article Title</TitleText>
diff --git a/stories/packages/PinchZoomStories/PinchZoomImageListStory.tsx b/stories/packages/PinchZoomStories/PinchZoomImageListStory.tsx
index ed84faa8..f9129b5e 100644
--- a/stories/packages/PinchZoomStories/PinchZoomImageListStory.tsx
+++ b/stories/packages/PinchZoomStories/PinchZoomImageListStory.tsx
@@ -1,5 +1,4 @@
 // Caveat: Expo web needs React to be imported
-import type {ReactElement} from 'react';
 import React, {useState} from 'react';
 import type {DimensionValue, ImageSourcePropType} from 'react-native';
 import {Dimensions, FlatList, Image} from 'react-native';
@@ -63,7 +62,7 @@ function ImageItem({
   source: imageSource,
   title,
   content,
-}: ImageItemProps): ReactElement {
+}: ImageItemProps): JSX.Element {
   const [width, setWidth] = useState<DimensionValue>('100%');
 
   return (
@@ -88,7 +87,7 @@ function ImageItem({
   );
 }
 
-function PinchZoomImageListStory(): ReactElement {
+function PinchZoomImageListStory(): JSX.Element {
   return (
     <Container>
       <FlatList
@@ -96,7 +95,7 @@ function PinchZoomImageListStory(): ReactElement {
         style={{flex: 1}}
         keyExtractor={(item): string => item.uri}
         // @ts-ignore
-        renderItem={({item, index}): React.ReactElement => (
+        renderItem={({item, index}): JSX.Element => (
           <ImageItem
             source={item}
             title={`Image ${index + 1}`}
diff --git a/stories/packages/PinchZoomStories/PinchZoomImageSliderStory.tsx b/stories/packages/PinchZoomStories/PinchZoomImageSliderStory.tsx
index b605037c..b6a2af39 100644
--- a/stories/packages/PinchZoomStories/PinchZoomImageSliderStory.tsx
+++ b/stories/packages/PinchZoomStories/PinchZoomImageSliderStory.tsx
@@ -1,5 +1,4 @@
 // Caveat: Expo web needs React to be imported
-import type {ReactElement} from 'react';
 import React from 'react';
 import type {ImageProps, ImageSourcePropType} from 'react-native';
 import {Animated, Dimensions, Image} from 'react-native';
@@ -44,7 +43,7 @@ const images = [
 
 function AutoHeightImage(
   props: ImageProps & {style: {width: number}},
-): React.ReactElement {
+): JSX.Element {
   const {style} = props;
   const [heightPerWidth, setHightPerWidth] = React.useState(0);
 
@@ -67,7 +66,7 @@ const PinchZoomImageSliderStory = ({
   imageSources = images,
 }: {
   imageSources?: ImageSourcePropType[];
-}): ReactElement => {
+}): JSX.Element => {
   const [currentIndex, setCurrentIndex] = React.useState(0);
 
   const animValues = React.useRef({
diff --git a/stories/uis/AccordionStories/AccordionBasicStory.tsx b/stories/uis/AccordionStories/AccordionBasicStory.tsx
index 279b671d..9ed3a7cb 100644
--- a/stories/uis/AccordionStories/AccordionBasicStory.tsx
+++ b/stories/uis/AccordionStories/AccordionBasicStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import styled from '@emotion/native';
@@ -27,7 +26,7 @@ const data = [
   },
 ];
 
-const AccordionBasic = (): ReactElement => {
+const AccordionBasic = (): JSX.Element => {
   return (
     <ScrollContainer>
       <StoryContainer>
diff --git a/stories/uis/AccordionStories/AccordionCustomStory.tsx b/stories/uis/AccordionStories/AccordionCustomStory.tsx
index 33c0e2a7..ee432454 100644
--- a/stories/uis/AccordionStories/AccordionCustomStory.tsx
+++ b/stories/uis/AccordionStories/AccordionCustomStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {View} from 'react-native';
@@ -45,7 +44,7 @@ const data = [
   },
 ];
 
-const AccordionCustom = (): ReactElement => {
+const AccordionCustom = (): JSX.Element => {
   const {theme} = useDooboo();
 
   return (
diff --git a/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx b/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx
index 7c3cf985..c40da085 100644
--- a/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx
+++ b/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx
@@ -7,7 +7,7 @@ import type {DoobooTheme} from '../../../main';
 import {ButtonGroup} from '../../../main/uis/ButtonGroup';
 import {StoryContainer, StoryTitle} from '../../GlobalStyles';
 
-const ButtonGroupBasic = (): React.ReactElement => {
+const ButtonGroupBasic = (): JSX.Element => {
   const color = select<keyof DoobooTheme['button']>(
     'color',
     ['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'info'],
diff --git a/stories/uis/ButtonStories/ButtonBasicStory.tsx b/stories/uis/ButtonStories/ButtonBasicStory.tsx
index aa99a34d..fbc7108d 100644
--- a/stories/uis/ButtonStories/ButtonBasicStory.tsx
+++ b/stories/uis/ButtonStories/ButtonBasicStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {boolean, number, select} from '@storybook/addon-knobs';
@@ -8,7 +7,7 @@ import {Button} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 import {buttonColors, buttonSizes, buttonTypes} from '../const';
 
-function ButtonBasicStory(): ReactElement {
+function ButtonBasicStory(): JSX.Element {
   const color = select<ButtonColorType>('color', buttonColors, 'primary');
   const size = select<ButtonSizeType>('size', buttonSizes, 'medium');
   const disabled = boolean('disabled', false);
diff --git a/stories/uis/ButtonStories/ButtonColorStory/OutlinedButtonColors.tsx b/stories/uis/ButtonStories/ButtonColorStory/OutlinedButtonColors.tsx
index 7c069336..72c410bd 100644
--- a/stories/uis/ButtonStories/ButtonColorStory/OutlinedButtonColors.tsx
+++ b/stories/uis/ButtonStories/ButtonColorStory/OutlinedButtonColors.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {boolean, number, select} from '@storybook/addon-knobs';
@@ -8,7 +7,7 @@ import {Button} from '../../../../main';
 import {StorySection} from '../../../GlobalStyles';
 import {buttonColors, buttonSizes} from '../../const';
 
-function OutlinedButtonColors(): ReactElement {
+function OutlinedButtonColors(): JSX.Element {
   const size = select<ButtonSizeType>('size', buttonSizes, 'medium');
   const disabled = boolean('disabled', false);
   const activeOpacity = number('activeOpacity', 0.8);
diff --git a/stories/uis/ButtonStories/ButtonColorStory/SolidButtonColors.tsx b/stories/uis/ButtonStories/ButtonColorStory/SolidButtonColors.tsx
index 33aa7d90..fba633c0 100644
--- a/stories/uis/ButtonStories/ButtonColorStory/SolidButtonColors.tsx
+++ b/stories/uis/ButtonStories/ButtonColorStory/SolidButtonColors.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {boolean, number, select} from '@storybook/addon-knobs';
@@ -8,7 +7,7 @@ import {Button} from '../../../../main';
 import {StorySection} from '../../../GlobalStyles';
 import {buttonColors, buttonSizes} from '../../const';
 
-function SolidButtonColors(): ReactElement {
+function SolidButtonColors(): JSX.Element {
   const size = select<ButtonSizeType>('size', buttonSizes, 'medium');
   const disabled = boolean('disabled', false);
   const activeOpacity = number('activeOpacity', 0.8);
diff --git a/stories/uis/ButtonStories/ButtonColorStory/TextButtonColors.tsx b/stories/uis/ButtonStories/ButtonColorStory/TextButtonColors.tsx
index fa1f0d49..203c5987 100644
--- a/stories/uis/ButtonStories/ButtonColorStory/TextButtonColors.tsx
+++ b/stories/uis/ButtonStories/ButtonColorStory/TextButtonColors.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {boolean, number, select} from '@storybook/addon-knobs';
@@ -8,7 +7,7 @@ import {Button} from '../../../../main';
 import {StorySection} from '../../../GlobalStyles';
 import {buttonColors, buttonSizes} from '../../const';
 
-function TextButtonColors(): ReactElement {
+function TextButtonColors(): JSX.Element {
   const size = select<ButtonSizeType>('size', buttonSizes, 'medium');
   const disabled = boolean('disabled', false);
   const activeOpacity = number('activeOpacity', 0.8);
diff --git a/stories/uis/ButtonStories/ButtonColorStory/index.tsx b/stories/uis/ButtonStories/ButtonColorStory/index.tsx
index f906c4c0..032cf9bc 100644
--- a/stories/uis/ButtonStories/ButtonColorStory/index.tsx
+++ b/stories/uis/ButtonStories/ButtonColorStory/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 
@@ -13,7 +12,7 @@ import OutlinedButtonColors from './OutlinedButtonColors';
 import SolidButtonColors from './SolidButtonColors';
 import TextButtonColors from './TextButtonColors';
 
-function ButtonColorStory(): ReactElement {
+function ButtonColorStory(): JSX.Element {
   return (
     <ScrollContainer>
       <StoryContainer>
diff --git a/stories/uis/ButtonStories/ButtonCustomStory.tsx b/stories/uis/ButtonStories/ButtonCustomStory.tsx
index 49c345ea..07ff0370 100644
--- a/stories/uis/ButtonStories/ButtonCustomStory.tsx
+++ b/stories/uis/ButtonStories/ButtonCustomStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {css} from '@emotion/native';
@@ -9,7 +8,7 @@ import {Button} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 import {buttonColors, buttonSizes, buttonTypes} from '../const';
 
-function ButtonCustomStory(): ReactElement {
+function ButtonCustomStory(): JSX.Element {
   const type = select<ButtonType>('type', buttonTypes, 'solid');
   const color = select<ButtonColorType>('color', buttonColors, 'primary');
   const size = select<ButtonSizeType>('size', buttonSizes, 'medium');
diff --git a/stories/uis/ButtonStories/ButtonDisabledStory.tsx b/stories/uis/ButtonStories/ButtonDisabledStory.tsx
index 5d7826b6..480698d8 100644
--- a/stories/uis/ButtonStories/ButtonDisabledStory.tsx
+++ b/stories/uis/ButtonStories/ButtonDisabledStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {select} from '@storybook/addon-knobs';
@@ -8,7 +7,7 @@ import {Button} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 import {buttonColors, buttonSizes} from '../const';
 
-function ButtonDisabledStory(): ReactElement {
+function ButtonDisabledStory(): JSX.Element {
   const types: ButtonType[] = ['text', 'solid', 'outlined'];
   const color = select<ButtonColorType>('color', buttonColors, 'primary');
   const size = select<ButtonSizeType>('size', buttonSizes, 'medium');
diff --git a/stories/uis/ButtonStories/ButtonEventStory/Counter.tsx b/stories/uis/ButtonStories/ButtonEventStory/Counter.tsx
index e7329225..52aae189 100644
--- a/stories/uis/ButtonStories/ButtonEventStory/Counter.tsx
+++ b/stories/uis/ButtonStories/ButtonEventStory/Counter.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React, {useState} from 'react';
 import {action} from '@storybook/addon-actions';
@@ -13,7 +12,7 @@ import {Button} from '../../../../main';
 import {StoryDescription, StorySection} from '../../../GlobalStyles';
 import {buttonColors, buttonSizes, buttonTypes} from '../../const';
 
-function Counter(): ReactElement {
+function Counter(): JSX.Element {
   const [count, setCount] = useState(0);
 
   const type = select<ButtonType>('type', buttonTypes, 'solid');
diff --git a/stories/uis/ButtonStories/ButtonEventStory/GoogleSignIn.tsx b/stories/uis/ButtonStories/ButtonEventStory/GoogleSignIn.tsx
index a2a38f6f..13b9193d 100644
--- a/stories/uis/ButtonStories/ButtonEventStory/GoogleSignIn.tsx
+++ b/stories/uis/ButtonStories/ButtonEventStory/GoogleSignIn.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React, {useState} from 'react';
 import {Image, View} from 'react-native';
@@ -16,7 +15,7 @@ import {Button, LoadingIndicator} from '../../../../main';
 import {StorySection} from '../../../GlobalStyles';
 import {buttonColors, buttonSizes, buttonTypes} from '../../const';
 
-function StartElementAndEndElement(): ReactElement {
+function StartElementAndEndElement(): JSX.Element {
   const [googleLoading, setGoogleLoading] = useState<boolean>(false);
 
   const type = select<ButtonType>('type', buttonTypes, 'solid');
diff --git a/stories/uis/ButtonStories/ButtonEventStory/index.tsx b/stories/uis/ButtonStories/ButtonEventStory/index.tsx
index 980ca84e..935a7647 100644
--- a/stories/uis/ButtonStories/ButtonEventStory/index.tsx
+++ b/stories/uis/ButtonStories/ButtonEventStory/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 
@@ -7,7 +6,7 @@ import {StoryDescription} from '../../../GlobalStyles';
 import Counter from './Counter';
 import GoogleSignIn from './GoogleSignIn';
 
-function ButtonEventStory(): ReactElement {
+function ButtonEventStory(): JSX.Element {
   return (
     <>
       <StoryDescription>Counter</StoryDescription>
diff --git a/stories/uis/ButtonStories/ButtonLoadingStory/LoadingElement.tsx b/stories/uis/ButtonStories/ButtonLoadingStory/LoadingElement.tsx
index 3d988094..fbf901f7 100644
--- a/stories/uis/ButtonStories/ButtonLoadingStory/LoadingElement.tsx
+++ b/stories/uis/ButtonStories/ButtonLoadingStory/LoadingElement.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {boolean, number, select} from '@storybook/addon-knobs';
@@ -12,7 +11,7 @@ import {Button, LoadingIndicator} from '../../../../main';
 import {StorySection} from '../../../GlobalStyles';
 import {buttonColors, buttonSizes, buttonTypes} from '../../const';
 
-function Loading(): ReactElement {
+function Loading(): JSX.Element {
   const type = select<ButtonType>('type', buttonTypes, 'solid');
   const color = select<ButtonColorType>('color', buttonColors, 'primary');
   const size = select<ButtonSizeType>('size', buttonSizes, 'medium');
diff --git a/stories/uis/ButtonStories/ButtonLoadingStory/index.tsx b/stories/uis/ButtonStories/ButtonLoadingStory/index.tsx
index 3272f242..a6939db0 100644
--- a/stories/uis/ButtonStories/ButtonLoadingStory/index.tsx
+++ b/stories/uis/ButtonStories/ButtonLoadingStory/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {select} from '@storybook/addon-knobs';
@@ -12,7 +11,7 @@ import {Button} from '../../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../../GlobalStyles';
 import {buttonColors, buttonSizes} from '../../const';
 
-function ButtonLoadingStory(): ReactElement {
+function ButtonLoadingStory(): JSX.Element {
   const types: ButtonType[] = ['text', 'solid', 'outlined'];
 
   const color = select<ButtonColorType>('color', buttonColors, 'primary');
diff --git a/stories/uis/ButtonStories/ButtonSizeStory.tsx b/stories/uis/ButtonStories/ButtonSizeStory.tsx
index 3946a549..b0688791 100644
--- a/stories/uis/ButtonStories/ButtonSizeStory.tsx
+++ b/stories/uis/ButtonStories/ButtonSizeStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {boolean, number, select} from '@storybook/addon-knobs';
@@ -8,7 +7,7 @@ import {Button} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 import {buttonColors} from '../const';
 
-function ButtonSizeStory(): ReactElement {
+function ButtonSizeStory(): JSX.Element {
   const sizes: ButtonSizeType[] = ['small', 'medium', 'large'];
   const color = select<ButtonColorType>('color', buttonColors, 'primary');
 
diff --git a/stories/uis/ButtonStories/ButtonStartAndEndStory.tsx b/stories/uis/ButtonStories/ButtonStartAndEndStory.tsx
index d4adc28a..8737ec3b 100644
--- a/stories/uis/ButtonStories/ButtonStartAndEndStory.tsx
+++ b/stories/uis/ButtonStories/ButtonStartAndEndStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {boolean, number, select} from '@storybook/addon-knobs';
@@ -8,7 +7,7 @@ import {Button, Icon} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 import {buttonColors, buttonSizes, buttonTypes} from '../const';
 
-function ButtonStartAndEndStory(): ReactElement {
+function ButtonStartAndEndStory(): JSX.Element {
   const type = select<ButtonType>('type', buttonTypes, 'solid');
   const color = select<ButtonColorType>('color', buttonColors, 'primary');
   const size = select<ButtonSizeType>('size', buttonSizes, 'medium');
diff --git a/stories/uis/CheckboxStories/CheckboxBasicStory.tsx b/stories/uis/CheckboxStories/CheckboxBasicStory.tsx
index e6b708bd..a1588ce7 100644
--- a/stories/uis/CheckboxStories/CheckboxBasicStory.tsx
+++ b/stories/uis/CheckboxStories/CheckboxBasicStory.tsx
@@ -1,4 +1,3 @@
-import type {FC, ReactElement, ReactNode} from 'react';
 // Caveat: Expo web needs React to be imported
 import React, {useState} from 'react';
 import {View} from 'react-native';
@@ -8,60 +7,68 @@ import {Checkbox, Typography} from '../../../main';
 import {ScrollContainer, StoryContainer, StoryTitle} from '../../GlobalStyles';
 import {checkboxColors} from '../const';
 
-const LabelWrapper: FC<{
+function LabelWrapper({
+  label,
+  children,
+}: {
   label: string;
-  children: ReactNode;
-}> = ({label, children}) => (
-  <View
-    style={{
-      flexDirection: 'column',
-      alignItems: 'center',
-    }}
-  >
-    <>
-      <Typography.Body1>{label}</Typography.Body1>
-      {children}
-    </>
-  </View>
-);
+  children: JSX.Element;
+}): JSX.Element {
+  return (
+    <View
+      style={{
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <>
+        <Typography.Body1>{label}</Typography.Body1>
+        {children}
+      </>
+    </View>
+  );
+}
 
-type CheckBoxProps = {
+function Checkboxes({
+  setChecked,
+  checked,
+}: {
   setChecked: (checked: boolean) => void;
   checked: boolean;
-};
+}): JSX.Element {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+      }}
+    >
+      {checkboxColors.map((color, i) => (
+        <LabelWrapper key={`${color}_${i}`} label={color}>
+          <Checkbox
+            style={{margin: 25}}
+            checked={checked}
+            disabled={boolean('disabled', false)}
+            onPress={() => setChecked(!checked)}
+            color={color}
+          />
+        </LabelWrapper>
+      ))}
 
-const Checkboxes: FC<CheckBoxProps> = ({setChecked, checked}) => (
-  <View
-    style={{
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-    }}
-  >
-    {checkboxColors.map((color, i) => (
-      <LabelWrapper key={`${color}_${i}`} label={color}>
+      <LabelWrapper label="disabled">
         <Checkbox
           style={{margin: 25}}
-          checked={checked}
+          checked={boolean('checked', checked)}
           disabled={boolean('disabled', false)}
           onPress={() => setChecked(!checked)}
-          color={color}
         />
       </LabelWrapper>
-    ))}
-
-    <LabelWrapper label="disabled">
-      <Checkbox
-        style={{margin: 25}}
-        checked={boolean('checked', checked)}
-        disabled={boolean('disabled', false)}
-        onPress={() => setChecked(!checked)}
-      />
-    </LabelWrapper>
-  </View>
-);
+    </View>
+  );
+}
 
-function CheckboxBasicStory(): ReactElement {
+function CheckboxBasicStory(): JSX.Element {
   const [checked, setChecked] = useState<boolean>(false);
 
   return (
diff --git a/stories/uis/CheckboxStories/CheckboxEndElementStory.tsx b/stories/uis/CheckboxStories/CheckboxEndElementStory.tsx
index 8e2f7ef2..2c9043dd 100644
--- a/stories/uis/CheckboxStories/CheckboxEndElementStory.tsx
+++ b/stories/uis/CheckboxStories/CheckboxEndElementStory.tsx
@@ -1,4 +1,3 @@
-import type {FC, ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React, {useState} from 'react';
 import {View} from 'react-native';
@@ -12,26 +11,28 @@ type CheckBoxProps = {
   checked: boolean;
 };
 
-const CheckboxWithEndElementStory: FC<CheckBoxProps> = ({
+function CheckboxWithEndElementStory({
   setChecked,
   checked,
-}) => (
-  <View style={{flexDirection: 'column'}}>
-    {[1, 2, 3].map((i) => (
-      <Checkbox
-        key={i}
-        checked={checked}
-        disabled={boolean('disabled', false)}
-        onPress={() => setChecked(!checked)}
-        endElement={
-          <Typography.Body2>Hello this is a checkbox</Typography.Body2>
-        }
-      />
-    ))}
-  </View>
-);
+}: CheckBoxProps): JSX.Element {
+  return (
+    <View style={{flexDirection: 'column'}}>
+      {[1, 2, 3].map((i) => (
+        <Checkbox
+          key={i}
+          checked={checked}
+          disabled={boolean('disabled', false)}
+          onPress={() => setChecked(!checked)}
+          endElement={
+            <Typography.Body2>Hello this is a checkbox</Typography.Body2>
+          }
+        />
+      ))}
+    </View>
+  );
+}
 
-function CheckboxEndElement(): ReactElement {
+function CheckboxEndElement(): JSX.Element {
   const [checked, setChecked] = useState<boolean>(false);
 
   return (
diff --git a/stories/uis/CheckboxStories/CheckboxStartElementStory.tsx b/stories/uis/CheckboxStories/CheckboxStartElementStory.tsx
index 55b143b0..a89774a9 100644
--- a/stories/uis/CheckboxStories/CheckboxStartElementStory.tsx
+++ b/stories/uis/CheckboxStories/CheckboxStartElementStory.tsx
@@ -1,4 +1,3 @@
-import type {FC, ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React, {useState} from 'react';
 import {View} from 'react-native';
@@ -7,31 +6,31 @@ import {boolean} from '@storybook/addon-knobs';
 import {Checkbox, Typography} from '../../../main';
 import {ScrollContainer, StoryContainer, StoryTitle} from '../../GlobalStyles';
 
-type CheckBoxProps = {
-  setChecked: (checked: boolean) => void;
-  checked: boolean;
-};
-
-const CheckboxWithStartElementStory: FC<CheckBoxProps> = ({
+function CheckboxWithStartElementStory({
   setChecked,
   checked,
-}) => (
-  <View style={{flexDirection: 'column'}}>
-    {[1, 2, 3].map((i) => (
-      <Checkbox
-        key={i}
-        checked={checked}
-        disabled={boolean('disabled', false)}
-        onPress={() => setChecked(!checked)}
-        startElement={
-          <Typography.Body2>Hello this is a checkbox</Typography.Body2>
-        }
-      />
-    ))}
-  </View>
-);
+}: {
+  setChecked: (checked: boolean) => void;
+  checked: boolean;
+}): JSX.Element {
+  return (
+    <View style={{flexDirection: 'column'}}>
+      {[1, 2, 3].map((i) => (
+        <Checkbox
+          key={i}
+          checked={checked}
+          disabled={boolean('disabled', false)}
+          onPress={() => setChecked(!checked)}
+          startElement={
+            <Typography.Body2>Hello this is a checkbox</Typography.Body2>
+          }
+        />
+      ))}
+    </View>
+  );
+}
 
-function CheckboxStartElement(): ReactElement {
+function CheckboxStartElement(): JSX.Element {
   const [checked, setChecked] = useState<boolean>(false);
 
   return (
diff --git a/stories/uis/EditTextStories/EditTextBasicStory.tsx b/stories/uis/EditTextStories/EditTextBasicStory.tsx
index ed3aa7e5..c39654e0 100644
--- a/stories/uis/EditTextStories/EditTextBasicStory.tsx
+++ b/stories/uis/EditTextStories/EditTextBasicStory.tsx
@@ -1,5 +1,4 @@
 // Caveat: Expo web needs React to be imported
-import type {ReactElement} from 'react';
 import React, {useState} from 'react';
 import {useTheme} from '@dooboo-ui/theme';
 import {css} from '@emotion/native';
@@ -11,13 +10,13 @@ import {EditText} from '../../../main/uis/EditText';
 import {Typography} from '../../../main/uis/Typography';
 import {ScrollContainer, StoryContainer} from '../../GlobalStyles';
 
-const EditTextBasicStory = (): ReactElement => {
+const EditTextBasicStory = (): JSX.Element => {
   const {theme} = useTheme();
   const [text, setText] = useState<string>('');
 
   const onTextChanged = (str: string): void => setText(str);
 
-  const renderCustomLabel = (status: EditTextStatus): ReactElement => {
+  const renderCustomLabel = (status: EditTextStatus): JSX.Element => {
     return (
       <Typography.Body1
         style={{
diff --git a/stories/uis/EditTextStories/EditTextStartEndStory.tsx b/stories/uis/EditTextStories/EditTextStartEndStory.tsx
index 88968c94..24b216f7 100644
--- a/stories/uis/EditTextStories/EditTextStartEndStory.tsx
+++ b/stories/uis/EditTextStories/EditTextStartEndStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React, {useState} from 'react';
 import {action} from '@storybook/addon-actions';
@@ -9,7 +8,7 @@ import {EditText} from '../../../main/uis/EditText';
 import {Typography} from '../../../main/uis/Typography';
 import {ScrollContainer, StoryContainer} from '../../GlobalStyles';
 
-const EditTextStartEndStory = (): ReactElement => {
+const EditTextStartEndStory = (): JSX.Element => {
   const [text, setText] = useState<string>('');
   const onTextChanged = (str: string): void => setText(str);
 
diff --git a/stories/uis/FabStories/FabBasicStory.tsx b/stories/uis/FabStories/FabBasicStory.tsx
index 44323519..9261153d 100644
--- a/stories/uis/FabStories/FabBasicStory.tsx
+++ b/stories/uis/FabStories/FabBasicStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React, {useState} from 'react';
 import {css} from '@emotion/native';
@@ -6,7 +5,7 @@ import {css} from '@emotion/native';
 import {Fab, Typography} from '../../../main';
 import {StoryContainer, StoryTitle} from '../../GlobalStyles';
 
-function FabBasicStory(): ReactElement {
+function FabBasicStory(): JSX.Element {
   const [selectedItem, setSelectedItem] = useState('none');
   const [active, setActive] = useState(false);
 
diff --git a/stories/uis/IconButtonStories/IconButtonBasicStory.tsx b/stories/uis/IconButtonStories/IconButtonBasicStory.tsx
index a79ffd9f..a8f9b995 100644
--- a/stories/uis/IconButtonStories/IconButtonBasicStory.tsx
+++ b/stories/uis/IconButtonStories/IconButtonBasicStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {css} from '@emotion/native';
@@ -9,7 +8,7 @@ import type {ButtonType} from '../../../main';
 import {IconButton} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 
-function IconButtonBasicStory(): ReactElement {
+function IconButtonBasicStory(): JSX.Element {
   const types: ButtonType[] = ['text', 'solid', 'outlined'];
 
   return (
diff --git a/stories/uis/IconButtonStories/IconButtonColorStory.tsx b/stories/uis/IconButtonStories/IconButtonColorStory.tsx
index 2414f0bb..6d269baa 100644
--- a/stories/uis/IconButtonStories/IconButtonColorStory.tsx
+++ b/stories/uis/IconButtonStories/IconButtonColorStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {action} from '@storybook/addon-actions';
@@ -8,7 +7,7 @@ import type {ButtonColorType} from '../../../main';
 import {IconButton} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 
-function IconButtonColorStory(): ReactElement {
+function IconButtonColorStory(): JSX.Element {
   const colors: ButtonColorType[] = [
     'primary',
     'secondary',
diff --git a/stories/uis/IconButtonStories/IconButtonDisabledStory.tsx b/stories/uis/IconButtonStories/IconButtonDisabledStory.tsx
index 69853d0c..19f4abc2 100644
--- a/stories/uis/IconButtonStories/IconButtonDisabledStory.tsx
+++ b/stories/uis/IconButtonStories/IconButtonDisabledStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {action} from '@storybook/addon-actions';
@@ -8,7 +7,7 @@ import type {ButtonType} from '../../../main';
 import {IconButton} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 
-function IconButtonDisabledStory(): ReactElement {
+function IconButtonDisabledStory(): JSX.Element {
   const types: ButtonType[] = ['text', 'solid', 'outlined'];
 
   return (
diff --git a/stories/uis/IconButtonStories/IconButtonIconElementStory.tsx b/stories/uis/IconButtonStories/IconButtonIconElementStory.tsx
index edce9280..df0d2ef7 100644
--- a/stories/uis/IconButtonStories/IconButtonIconElementStory.tsx
+++ b/stories/uis/IconButtonStories/IconButtonIconElementStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {action} from '@storybook/addon-actions';
@@ -7,7 +6,7 @@ import {boolean, number} from '@storybook/addon-knobs';
 import {Icon, IconButton} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 
-function IconButtonIconElementStory(): ReactElement {
+function IconButtonIconElementStory(): JSX.Element {
   return (
     <StoryContainer>
       <StoryTitle>IconElement</StoryTitle>
diff --git a/stories/uis/IconButtonStories/IconButtonLoadingStory/LoadingElement.tsx b/stories/uis/IconButtonStories/IconButtonLoadingStory/LoadingElement.tsx
index e6376bab..dcbb180d 100644
--- a/stories/uis/IconButtonStories/IconButtonLoadingStory/LoadingElement.tsx
+++ b/stories/uis/IconButtonStories/IconButtonLoadingStory/LoadingElement.tsx
@@ -1,11 +1,10 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 
 import {IconButton, LoadingIndicator} from '../../../../main';
 import {StorySection} from '../../../GlobalStyles';
 
-function IconButtonLoadingElement(): ReactElement {
+function IconButtonLoadingElement(): JSX.Element {
   return (
     <StorySection>
       <IconButton
diff --git a/stories/uis/IconButtonStories/IconButtonLoadingStory/index.tsx b/stories/uis/IconButtonStories/IconButtonLoadingStory/index.tsx
index d74bb1ae..bf68536d 100644
--- a/stories/uis/IconButtonStories/IconButtonLoadingStory/index.tsx
+++ b/stories/uis/IconButtonStories/IconButtonLoadingStory/index.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 
@@ -6,7 +5,7 @@ import type {ButtonType} from '../../../../main';
 import {IconButton} from '../../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../../GlobalStyles';
 
-function IconButtonLoadingStory(): ReactElement {
+function IconButtonLoadingStory(): JSX.Element {
   const types: ButtonType[] = ['text', 'solid', 'outlined'];
 
   return (
diff --git a/stories/uis/IconButtonStories/IconButtonSizeStory.tsx b/stories/uis/IconButtonStories/IconButtonSizeStory.tsx
index 8e2a1f5c..b2391e44 100644
--- a/stories/uis/IconButtonStories/IconButtonSizeStory.tsx
+++ b/stories/uis/IconButtonStories/IconButtonSizeStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {action} from '@storybook/addon-actions';
@@ -8,7 +7,7 @@ import type {ButtonSizeType} from '../../../main';
 import {IconButton} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 
-function IconButtonSizeStory(): ReactElement {
+function IconButtonSizeStory(): JSX.Element {
   const sizes: ButtonSizeType[] = ['small', 'medium', 'large'];
 
   return (
diff --git a/stories/uis/IconStories/IconBasicStory.tsx b/stories/uis/IconStories/IconBasicStory.tsx
index d59b3093..4ccef10f 100644
--- a/stories/uis/IconStories/IconBasicStory.tsx
+++ b/stories/uis/IconStories/IconBasicStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import {View} from 'react-native';
 import styled from '@emotion/native';
@@ -34,12 +33,12 @@ const StyledIcon = styled(Icon)`
   padding: 8px;
 `;
 
-function IconBasicStory(): ReactElement {
+function IconBasicStory(): JSX.Element {
   return (
     <StoryContainer>
       <ScrollContainer contentContainerStyle={{alignSelf: 'stretch'}}>
         <Container style={{paddingVertical: 60}}>
-          {doobooIconList.map((icon): ReactElement => {
+          {doobooIconList.map((icon): JSX.Element => {
             return (
               <View
                 key={icon}
diff --git a/stories/uis/LoadingIndicatorStories/LoadingIndicatorBasicStory.tsx b/stories/uis/LoadingIndicatorStories/LoadingIndicatorBasicStory.tsx
index c4360a34..ad10f7bc 100644
--- a/stories/uis/LoadingIndicatorStories/LoadingIndicatorBasicStory.tsx
+++ b/stories/uis/LoadingIndicatorStories/LoadingIndicatorBasicStory.tsx
@@ -1,11 +1,10 @@
 // Caveat: Expo web needs React to be imported
-import type {ReactElement} from 'react';
 import React from 'react';
 
 import {LoadingIndicator} from '../../../main';
 import {StoryContainer} from '../../GlobalStyles';
 
-function LoadingIndicatorBasicStory(): ReactElement {
+function LoadingIndicatorBasicStory(): JSX.Element {
   return (
     <StoryContainer>
       <LoadingIndicator />
diff --git a/stories/uis/LoadingIndicatorStories/LoadingIndicatorCustomStory.tsx b/stories/uis/LoadingIndicatorStories/LoadingIndicatorCustomStory.tsx
index a9a1ad37..2c7a72e7 100644
--- a/stories/uis/LoadingIndicatorStories/LoadingIndicatorCustomStory.tsx
+++ b/stories/uis/LoadingIndicatorStories/LoadingIndicatorCustomStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React, {useEffect, useState} from 'react';
 import type {ImageStyle, StyleProp} from 'react-native';
@@ -12,7 +11,7 @@ type Props = {
   style?: StyleProp<ImageStyle>;
 };
 
-function LoadingIndicatorCustomStory({style}: Props): ReactElement {
+function LoadingIndicatorCustomStory({style}: Props): JSX.Element {
   const [spinAnim] = useState(new Animated.Value(0));
 
   const spin = spinAnim.interpolate({
diff --git a/stories/uis/LoadingIndicatorStories/LoadingIndicatorImageStory.tsx b/stories/uis/LoadingIndicatorStories/LoadingIndicatorImageStory.tsx
index e76a5967..64e9d220 100644
--- a/stories/uis/LoadingIndicatorStories/LoadingIndicatorImageStory.tsx
+++ b/stories/uis/LoadingIndicatorStories/LoadingIndicatorImageStory.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import {LoadingIndicator} from '../../../main';
 import {StoryContainer} from '../../GlobalStyles';
 
-function LoadingIndicatorImageStory(): React.ReactElement {
+function LoadingIndicatorImageStory(): JSX.Element {
   return (
     <StoryContainer>
       <LoadingIndicator imgSource="https://user-images.githubusercontent.com/27461460/217134243-2db5ffcf-3711-4a69-8a35-6c2ebb500b17.gif" />
diff --git a/stories/uis/NetworkImageStories/NetworkImageBasicStory.tsx b/stories/uis/NetworkImageStories/NetworkImageBasicStory.tsx
index 6919e9d0..5ca1f884 100644
--- a/stories/uis/NetworkImageStories/NetworkImageBasicStory.tsx
+++ b/stories/uis/NetworkImageStories/NetworkImageBasicStory.tsx
@@ -11,7 +11,7 @@ const ScrollContainer = styled.ScrollView`
   background-color: ${({theme}) => theme.bg.basic};
 `;
 
-function NetworkImageBasicStory(): React.ReactElement {
+function NetworkImageBasicStory(): JSX.Element {
   const {theme} = useTheme();
 
   return (
diff --git a/stories/uis/ProgressBarStories/ProgressBarBasicStory.tsx b/stories/uis/ProgressBarStories/ProgressBarBasicStory.tsx
index 075b394a..42651d82 100644
--- a/stories/uis/ProgressBarStories/ProgressBarBasicStory.tsx
+++ b/stories/uis/ProgressBarStories/ProgressBarBasicStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import styled from '@emotion/native';
@@ -28,7 +27,7 @@ const SubTitle = styled.Text`
   color: ${({theme}) => theme.role.primary};
 `;
 
-function ProgressBarBasicStory(): ReactElement {
+function ProgressBarBasicStory(): JSX.Element {
   return (
     <StoryContainer>
       <StoryTitle>Basic</StoryTitle>
diff --git a/stories/uis/ProgressCircleStories/ProgressCircleBasicStory.tsx b/stories/uis/ProgressCircleStories/ProgressCircleBasicStory.tsx
index 024a5b4b..96a14a94 100644
--- a/stories/uis/ProgressCircleStories/ProgressCircleBasicStory.tsx
+++ b/stories/uis/ProgressCircleStories/ProgressCircleBasicStory.tsx
@@ -1,5 +1,4 @@
 // Caveat: Expo web needs React to be imported
-import type {ReactElement} from 'react';
 import React, {useEffect, useState} from 'react';
 import {
   boolean as booleanInput,
@@ -12,7 +11,7 @@ import type {ButtonColorType} from '../../../main';
 import {ProgressCircle} from '../../../main';
 import {StoryContainer, StoryTitle} from '../../GlobalStyles';
 
-function ProgressCircleBasicStory(): ReactElement {
+function ProgressCircleBasicStory(): JSX.Element {
   const progressInput = numberInput('progress', 0);
   const autoPlay = booleanInput('auto play', true);
 
diff --git a/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx b/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx
index f3adcddc..6851954c 100644
--- a/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx
+++ b/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx
@@ -1,5 +1,4 @@
 // Caveat: Expo web needs React to be imported
-import type {ReactElement} from 'react';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 
@@ -10,7 +9,7 @@ import {ScrollContainer, StoryContainer, StoryTitle} from '../../GlobalStyles';
 const types = ['primary', 'secondary', 'success', 'info', 'warning', 'danger'];
 const data = ['Person', 'Animal', 'Bird', 'Other'];
 
-function RadioButtonBasicStory(): ReactElement {
+function RadioButtonBasicStory(): JSX.Element {
   const [selectedValue, setSelectedValue] = useState<string>(data[0]);
 
   return (
diff --git a/stories/uis/RadioGroupStories/RadioGroupElementStory.tsx b/stories/uis/RadioGroupStories/RadioGroupElementStory.tsx
index cb4a2c48..471f0405 100644
--- a/stories/uis/RadioGroupStories/RadioGroupElementStory.tsx
+++ b/stories/uis/RadioGroupStories/RadioGroupElementStory.tsx
@@ -1,5 +1,4 @@
 // Caveat: Expo web needs React to be imported
-import type {ReactElement} from 'react';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 
@@ -10,7 +9,7 @@ import {ScrollContainer, StoryContainer, StoryTitle} from '../../GlobalStyles';
 const types = ['primary', 'secondary', 'success', 'info', 'warning', 'danger'];
 const data = ['Person', 'Animal', 'Bird', 'Other'];
 
-function RadioButtonElementStory(): ReactElement {
+function RadioButtonElementStory(): JSX.Element {
   const [selectedValue, setSelectedValue] = useState<string>(data[0]);
 
   return (
diff --git a/stories/uis/RatingStories/RatingBasicStory.tsx b/stories/uis/RatingStories/RatingBasicStory.tsx
index 2d694a4e..ac7e6879 100644
--- a/stories/uis/RatingStories/RatingBasicStory.tsx
+++ b/stories/uis/RatingStories/RatingBasicStory.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 // Caveat: Expo web needs React to be imported
 import React from 'react';
 import {action} from '@storybook/addon-actions';
@@ -7,7 +6,7 @@ import {boolean, number, select, text} from '@storybook/addon-knobs';
 import {Rating} from '../../../main';
 import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles';
 
-function RatingBasicStory(): ReactElement {
+function RatingBasicStory(): JSX.Element {
   const disabled = boolean('disabled', false);
   const allowHalfRating = boolean('allowHalfRating', true);
   const color = text('color', '#000000');
diff --git a/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx b/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx
index 951241c7..0e89de2c 100644
--- a/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx
+++ b/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx
@@ -1,5 +1,4 @@
 // Caveat: Expo web needs React to be imported
-import type {ReactElement} from 'react';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import {useTheme} from '@dooboo-ui/theme';
@@ -8,7 +7,7 @@ import {number} from '@storybook/addon-knobs';
 import {SwitchToggle} from '../../../main';
 import {ScrollContainer, StoryContainer, StoryTitle} from '../../GlobalStyles';
 
-function SwitchToggleBasicStory(): ReactElement {
+function SwitchToggleBasicStory(): JSX.Element {
   const [on, off] = useState<boolean>(false);
   const {theme} = useTheme();
 
diff --git a/stories/uis/TypographyStories/TypographyBasicStory.tsx b/stories/uis/TypographyStories/TypographyBasicStory.tsx
index 561939be..52ad8c21 100644
--- a/stories/uis/TypographyStories/TypographyBasicStory.tsx
+++ b/stories/uis/TypographyStories/TypographyBasicStory.tsx
@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import {Typography} from '../../../main';
 import {ScrollContainer, StoryContainer} from '../../GlobalStyles';
 
-function TypographyBasicStory(): React.ReactElement {
+function TypographyBasicStory(): JSX.Element {
   return (
     <ScrollContainer>
       <StoryContainer>
diff --git a/test/testUtils.tsx b/test/testUtils.tsx
index b4e24318..d0ccb945 100644
--- a/test/testUtils.tsx
+++ b/test/testUtils.tsx
@@ -1,6 +1,5 @@
 import 'react-native';
 
-import type {ReactElement} from 'react';
 import React from 'react';
 import type {ThemeType} from '@dooboo-ui/theme';
 import {ThemeProvider} from '@dooboo-ui/theme';
@@ -16,8 +15,8 @@ export const createTestProps = (
 });
 
 export const createComponent = (
-  children: ReactElement,
+  children: JSX.Element,
   themeType?: ThemeType,
-): ReactElement => {
+): JSX.Element => {
   return <ThemeProvider initialThemeType={themeType}>{children}</ThemeProvider>;
 };