diff --git a/.eslintrc b/.eslintrc
index 6b09f6097..8f902d335 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -37,14 +37,11 @@
         "sourceType": "module",
         "project": "./tsconfig.json"
       },
-      "settings": {
-        "react": {
-          "version": "detect"
-        }
-      },
       "plugins": ["@typescript-eslint", "react"],
       "rules": {
-        "react/prop-types": "off"
+        "react/prop-types": "off",
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off"
       }
     },
     {
@@ -67,6 +64,11 @@
         "camelcase": "off"
       }
     }
-  ]
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }
 
diff --git a/app/frontend/src/javascript/components/accounting/accounting-codes-settings.tsx b/app/frontend/src/javascript/components/accounting/accounting-codes-settings.tsx
index 983f83089..cc77f891c 100644
--- a/app/frontend/src/javascript/components/accounting/accounting-codes-settings.tsx
+++ b/app/frontend/src/javascript/components/accounting/accounting-codes-settings.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { FabButton } from '../base/fab-button';
diff --git a/app/frontend/src/javascript/components/accounting/advanced-accounting-form.tsx b/app/frontend/src/javascript/components/accounting/advanced-accounting-form.tsx
index 3ead087ea..a1202b6d3 100644
--- a/app/frontend/src/javascript/components/accounting/advanced-accounting-form.tsx
+++ b/app/frontend/src/javascript/components/accounting/advanced-accounting-form.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import SettingAPI from '../../api/setting';
 import { UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
diff --git a/app/frontend/src/javascript/components/angular/switch.ts b/app/frontend/src/javascript/components/angular/switch.ts
index 0479c92da..f5a7123a3 100644
--- a/app/frontend/src/javascript/components/angular/switch.ts
+++ b/app/frontend/src/javascript/components/angular/switch.ts
@@ -1,10 +1,10 @@
-/**
- * This is a compatibility wrapper to allow usage of react-switch inside the angular.js app
- */
 import Switch from 'react-switch';
 import { react2angular } from 'react2angular';
 import { IApplication } from '../../models/application';
 
 declare const Application: IApplication;
 
+/**
+ * This is a compatibility wrapper to allow usage of react-switch inside the angular.js app
+ */
 Application.Components.component('switch', react2angular(Switch, ['checked', 'onChange', 'id', 'className', 'disabled']));
diff --git a/app/frontend/src/javascript/components/authentication-provider/boolean-mapping-form.tsx b/app/frontend/src/javascript/components/authentication-provider/boolean-mapping-form.tsx
index 362764855..29a5f8e51 100644
--- a/app/frontend/src/javascript/components/authentication-provider/boolean-mapping-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/boolean-mapping-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/authentication-provider/data-mapping-form.tsx b/app/frontend/src/javascript/components/authentication-provider/data-mapping-form.tsx
index b139a1194..acc547701 100644
--- a/app/frontend/src/javascript/components/authentication-provider/data-mapping-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/data-mapping-form.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { UseFormRegister, useFieldArray, ArrayPath, useWatch, Path, FieldPathValue } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import AuthProviderAPI from '../../api/auth-provider';
diff --git a/app/frontend/src/javascript/components/authentication-provider/database-form.tsx b/app/frontend/src/javascript/components/authentication-provider/database-form.tsx
index 124ed37ec..80fca485e 100644
--- a/app/frontend/src/javascript/components/authentication-provider/database-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/database-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormInput } from '../form/form-input';
 import { UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
diff --git a/app/frontend/src/javascript/components/authentication-provider/date-mapping-form.tsx b/app/frontend/src/javascript/components/authentication-provider/date-mapping-form.tsx
index 75c0be28f..767b43d9d 100644
--- a/app/frontend/src/javascript/components/authentication-provider/date-mapping-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/date-mapping-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { useTranslation } from 'react-i18next';
 import { FormSelect } from '../form/form-select';
diff --git a/app/frontend/src/javascript/components/authentication-provider/integer-mapping-form.tsx b/app/frontend/src/javascript/components/authentication-provider/integer-mapping-form.tsx
index a74a69da0..bb1eef3a5 100644
--- a/app/frontend/src/javascript/components/authentication-provider/integer-mapping-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/integer-mapping-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { ArrayPath, useFieldArray, UseFormRegister } from 'react-hook-form';
 import { Control } from 'react-hook-form/dist/types/form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
diff --git a/app/frontend/src/javascript/components/authentication-provider/oauth2-data-mapping-form.tsx b/app/frontend/src/javascript/components/authentication-provider/oauth2-data-mapping-form.tsx
index 5fd93d8d2..7ce810dc5 100644
--- a/app/frontend/src/javascript/components/authentication-provider/oauth2-data-mapping-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/oauth2-data-mapping-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { UseFormRegister } from 'react-hook-form';
 import { Control } from 'react-hook-form/dist/types/form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
diff --git a/app/frontend/src/javascript/components/authentication-provider/oauth2-form.tsx b/app/frontend/src/javascript/components/authentication-provider/oauth2-form.tsx
index 1d6f0f5df..b882c3346 100644
--- a/app/frontend/src/javascript/components/authentication-provider/oauth2-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/oauth2-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormInput } from '../form/form-input';
 import { UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
diff --git a/app/frontend/src/javascript/components/authentication-provider/openid-connect-data-mapping-form.tsx b/app/frontend/src/javascript/components/authentication-provider/openid-connect-data-mapping-form.tsx
index 1b2281b1f..ecc4740d1 100644
--- a/app/frontend/src/javascript/components/authentication-provider/openid-connect-data-mapping-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/openid-connect-data-mapping-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Path, UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FormInput } from '../form/form-input';
diff --git a/app/frontend/src/javascript/components/authentication-provider/openid-connect-form.tsx b/app/frontend/src/javascript/components/authentication-provider/openid-connect-form.tsx
index 0aa816334..830bfc48f 100644
--- a/app/frontend/src/javascript/components/authentication-provider/openid-connect-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/openid-connect-form.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { Path, UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx b/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
index d9c7d864c..97fb8f9c7 100644
--- a/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import * as React from 'react';
 import { useForm, SubmitHandler, useWatch } from 'react-hook-form';
 import { react2angular } from 'react2angular';
 import { debounce as _debounce } from 'lodash';
diff --git a/app/frontend/src/javascript/components/authentication-provider/string-mapping-form.tsx b/app/frontend/src/javascript/components/authentication-provider/string-mapping-form.tsx
index edd527513..0f7e5e9df 100644
--- a/app/frontend/src/javascript/components/authentication-provider/string-mapping-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/string-mapping-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { ArrayPath, useFieldArray, UseFormRegister } from 'react-hook-form';
 import { Control } from 'react-hook-form/dist/types/form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
diff --git a/app/frontend/src/javascript/components/authentication-provider/type-mapping-modal.tsx b/app/frontend/src/javascript/components/authentication-provider/type-mapping-modal.tsx
index e2fc0539a..ba0d0bcf8 100644
--- a/app/frontend/src/javascript/components/authentication-provider/type-mapping-modal.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/type-mapping-modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FabModal } from '../base/fab-modal';
 import { useTranslation } from 'react-i18next';
 import { IntegerMappingForm } from './integer-mapping-form';
diff --git a/app/frontend/src/javascript/components/base/accordion-item.tsx b/app/frontend/src/javascript/components/base/accordion-item.tsx
index 63eb6c9e1..0874c5055 100644
--- a/app/frontend/src/javascript/components/base/accordion-item.tsx
+++ b/app/frontend/src/javascript/components/base/accordion-item.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { CaretDown } from 'phosphor-react';
 
 interface AccordionItemProps {
diff --git a/app/frontend/src/javascript/components/base/error-boundary.tsx b/app/frontend/src/javascript/components/base/error-boundary.tsx
index 742d9d690..0d05db523 100644
--- a/app/frontend/src/javascript/components/base/error-boundary.tsx
+++ b/app/frontend/src/javascript/components/base/error-boundary.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 
 interface ErrorBoundaryState {
   hasError: boolean;
@@ -8,7 +8,7 @@ interface ErrorBoundaryState {
  * This component will catch javascript errors anywhere in their child component tree and display a message to the user.
  * @see https://reactjs.org/docs/error-boundaries.html
  */
-export class ErrorBoundary extends React.Component<unknown, ErrorBoundaryState> {
+export class ErrorBoundary extends Component<unknown, ErrorBoundaryState> {
   constructor (props) {
     super(props);
     this.state = { hasError: false };
diff --git a/app/frontend/src/javascript/components/base/fab-alert.tsx b/app/frontend/src/javascript/components/base/fab-alert.tsx
index f8a06c83d..7e30d4e21 100644
--- a/app/frontend/src/javascript/components/base/fab-alert.tsx
+++ b/app/frontend/src/javascript/components/base/fab-alert.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 interface FabAlertProps {
   level: 'info' | 'warning' | 'danger',
diff --git a/app/frontend/src/javascript/components/base/fab-button.tsx b/app/frontend/src/javascript/components/base/fab-button.tsx
index 33951ff8a..f9d58d03c 100644
--- a/app/frontend/src/javascript/components/base/fab-button.tsx
+++ b/app/frontend/src/javascript/components/base/fab-button.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, BaseSyntheticEvent } from 'react';
+import { ReactNode, BaseSyntheticEvent } from 'react';
+import * as React from 'react';
 
 interface FabButtonProps {
   onClick?: (event: BaseSyntheticEvent) => void,
diff --git a/app/frontend/src/javascript/components/base/fab-input.tsx b/app/frontend/src/javascript/components/base/fab-input.tsx
index f7e57dc5c..4f026692d 100644
--- a/app/frontend/src/javascript/components/base/fab-input.tsx
+++ b/app/frontend/src/javascript/components/base/fab-input.tsx
@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent, ReactNode, useCallback, useEffect, useState } from 'react';
+import { BaseSyntheticEvent, ReactNode, useCallback, useEffect, useState } from 'react';
+import * as React from 'react';
 import { debounce as _debounce } from 'lodash';
 
 type inputType = string|number|readonly string [];
diff --git a/app/frontend/src/javascript/components/base/fab-modal.tsx b/app/frontend/src/javascript/components/base/fab-modal.tsx
index 0318f3dea..713b70b91 100644
--- a/app/frontend/src/javascript/components/base/fab-modal.tsx
+++ b/app/frontend/src/javascript/components/base/fab-modal.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, BaseSyntheticEvent, useEffect } from 'react';
+import { ReactNode, BaseSyntheticEvent, useEffect } from 'react';
+import * as React from 'react';
 import Modal from 'react-modal';
 import { useTranslation } from 'react-i18next';
 import { Loader } from './loader';
diff --git a/app/frontend/src/javascript/components/base/fab-output-copy.tsx b/app/frontend/src/javascript/components/base/fab-output-copy.tsx
index 98cfed9e3..4e24e9d09 100644
--- a/app/frontend/src/javascript/components/base/fab-output-copy.tsx
+++ b/app/frontend/src/javascript/components/base/fab-output-copy.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 interface FabOutputCopyProps {
   text: string,
diff --git a/app/frontend/src/javascript/components/base/fab-pagination.tsx b/app/frontend/src/javascript/components/base/fab-pagination.tsx
index 89af684ce..80229eca3 100644
--- a/app/frontend/src/javascript/components/base/fab-pagination.tsx
+++ b/app/frontend/src/javascript/components/base/fab-pagination.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { CaretDoubleLeft, CaretLeft, CaretRight, CaretDoubleRight } from 'phosphor-react';
 
 interface FabPaginationProps {
diff --git a/app/frontend/src/javascript/components/base/fab-panel.tsx b/app/frontend/src/javascript/components/base/fab-panel.tsx
index 950793975..5c1953227 100644
--- a/app/frontend/src/javascript/components/base/fab-panel.tsx
+++ b/app/frontend/src/javascript/components/base/fab-panel.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import * as React from 'react';
 
 interface FabPanelProps {
   className?: string,
diff --git a/app/frontend/src/javascript/components/base/fab-popover.tsx b/app/frontend/src/javascript/components/base/fab-popover.tsx
index 897e3963c..d271d35d7 100644
--- a/app/frontend/src/javascript/components/base/fab-popover.tsx
+++ b/app/frontend/src/javascript/components/base/fab-popover.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import * as React from 'react';
 
 interface FabPopoverProps {
   title: string,
diff --git a/app/frontend/src/javascript/components/base/fab-state-label.tsx b/app/frontend/src/javascript/components/base/fab-state-label.tsx
index 25fc0a998..fc1fc4189 100644
--- a/app/frontend/src/javascript/components/base/fab-state-label.tsx
+++ b/app/frontend/src/javascript/components/base/fab-state-label.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 interface FabStateLabelProps {
   status?: string,
diff --git a/app/frontend/src/javascript/components/base/fab-tabs.tsx b/app/frontend/src/javascript/components/base/fab-tabs.tsx
index 2defdf3e7..486cf9d49 100644
--- a/app/frontend/src/javascript/components/base/fab-tabs.tsx
+++ b/app/frontend/src/javascript/components/base/fab-tabs.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 
 type tabId = string|number;
 
diff --git a/app/frontend/src/javascript/components/base/html-translate.tsx b/app/frontend/src/javascript/components/base/html-translate.tsx
index 9b0c190cd..ad5b053f3 100644
--- a/app/frontend/src/javascript/components/base/html-translate.tsx
+++ b/app/frontend/src/javascript/components/base/html-translate.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface HtmlTranslateProps {
diff --git a/app/frontend/src/javascript/components/base/labelled-input.tsx b/app/frontend/src/javascript/components/base/labelled-input.tsx
index 41dd12308..a4d9c2e48 100644
--- a/app/frontend/src/javascript/components/base/labelled-input.tsx
+++ b/app/frontend/src/javascript/components/base/labelled-input.tsx
@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent, ReactNode } from 'react';
+import { BaseSyntheticEvent, ReactNode } from 'react';
+import * as React from 'react';
 
 type inputType = string|number|readonly string [];
 
diff --git a/app/frontend/src/javascript/components/base/loader.tsx b/app/frontend/src/javascript/components/base/loader.tsx
index 5e842e810..0a7cec455 100644
--- a/app/frontend/src/javascript/components/base/loader.tsx
+++ b/app/frontend/src/javascript/components/base/loader.tsx
@@ -1,4 +1,5 @@
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
+import * as React from 'react';
 
 /**
  * This component is a wrapper that display a loader while the children components have their rendering suspended.
diff --git a/app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx b/app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx
index 075bb3191..d50a0c7f2 100644
--- a/app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx
+++ b/app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx
@@ -1,4 +1,5 @@
-import React, { forwardRef, RefObject, useEffect, useImperativeHandle, useRef } from 'react';
+import { forwardRef, RefObject, useEffect, useImperativeHandle, useRef } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useEditor, EditorContent, Editor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
diff --git a/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx b/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx
index a984c473f..f8255868d 100644
--- a/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx
+++ b/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { Editor } from '@tiptap/react';
diff --git a/app/frontend/src/javascript/components/cart/cart-button.tsx b/app/frontend/src/javascript/components/cart/cart-button.tsx
index b9e2b3029..2dc8a5b23 100644
--- a/app/frontend/src/javascript/components/cart/cart-button.tsx
+++ b/app/frontend/src/javascript/components/cart/cart-button.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
diff --git a/app/frontend/src/javascript/components/cart/store-cart.tsx b/app/frontend/src/javascript/components/cart/store-cart.tsx
index 87345ee6c..869e2cf80 100644
--- a/app/frontend/src/javascript/components/cart/store-cart.tsx
+++ b/app/frontend/src/javascript/components/cart/store-cart.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
diff --git a/app/frontend/src/javascript/components/coupon/coupon-input.tsx b/app/frontend/src/javascript/components/coupon/coupon-input.tsx
index 427f14998..92c22d5f0 100644
--- a/app/frontend/src/javascript/components/coupon/coupon-input.tsx
+++ b/app/frontend/src/javascript/components/coupon/coupon-input.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabInput } from '../base/fab-input';
 import { FabAlert } from '../base/fab-alert';
diff --git a/app/frontend/src/javascript/components/dashboard/orders/orders-dashboard.tsx b/app/frontend/src/javascript/components/dashboard/orders/orders-dashboard.tsx
index 652d05306..7f8701140 100644
--- a/app/frontend/src/javascript/components/dashboard/orders/orders-dashboard.tsx
+++ b/app/frontend/src/javascript/components/dashboard/orders/orders-dashboard.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../../base/loader';
diff --git a/app/frontend/src/javascript/components/dashboard/reservations/credits-panel.tsx b/app/frontend/src/javascript/components/dashboard/reservations/credits-panel.tsx
index 4f888c4e5..e8192fb4a 100644
--- a/app/frontend/src/javascript/components/dashboard/reservations/credits-panel.tsx
+++ b/app/frontend/src/javascript/components/dashboard/reservations/credits-panel.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 import { FabPanel } from '../../base/fab-panel';
 import { Loader } from '../../base/loader';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/dashboard/reservations/reservations-dashboard.tsx b/app/frontend/src/javascript/components/dashboard/reservations/reservations-dashboard.tsx
index 71ac2a07c..302ca26f2 100644
--- a/app/frontend/src/javascript/components/dashboard/reservations/reservations-dashboard.tsx
+++ b/app/frontend/src/javascript/components/dashboard/reservations/reservations-dashboard.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { IApplication } from '../../../models/application';
 import { react2angular } from 'react2angular';
 import { ReservationsPanel } from './reservations-panel';
diff --git a/app/frontend/src/javascript/components/dashboard/reservations/reservations-panel.tsx b/app/frontend/src/javascript/components/dashboard/reservations/reservations-panel.tsx
index bbcb49068..1c65c1fdc 100644
--- a/app/frontend/src/javascript/components/dashboard/reservations/reservations-panel.tsx
+++ b/app/frontend/src/javascript/components/dashboard/reservations/reservations-panel.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 import { FabPanel } from '../../base/fab-panel';
 import { Reservation, SlotsReservation } from '../../../models/reservation';
 import ReservationAPI from '../../../api/reservation';
diff --git a/app/frontend/src/javascript/components/document-filters.tsx b/app/frontend/src/javascript/components/document-filters.tsx
index d8566b467..1bb826ae2 100644
--- a/app/frontend/src/javascript/components/document-filters.tsx
+++ b/app/frontend/src/javascript/components/document-filters.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { LabelledInput } from './base/labelled-input';
 import { useTranslation } from 'react-i18next';
 import { TDateISODate } from '../typings/date-iso';
diff --git a/app/frontend/src/javascript/components/events/event-card.tsx b/app/frontend/src/javascript/components/events/event-card.tsx
index 6d6ca6c78..2becae562 100644
--- a/app/frontend/src/javascript/components/events/event-card.tsx
+++ b/app/frontend/src/javascript/components/events/event-card.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { IApplication } from '../../models/application';
diff --git a/app/frontend/src/javascript/components/events/event-form.tsx b/app/frontend/src/javascript/components/events/event-form.tsx
index e22187765..6bb08b5cb 100644
--- a/app/frontend/src/javascript/components/events/event-form.tsx
+++ b/app/frontend/src/javascript/components/events/event-form.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { SubmitHandler, useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { Event, EventDecoration, EventPriceCategoryAttributes, RecurrenceOption } from '../../models/event';
 import EventAPI from '../../api/event';
diff --git a/app/frontend/src/javascript/components/events/update-recurrent-modal.tsx b/app/frontend/src/javascript/components/events/update-recurrent-modal.tsx
index c68ac060b..e4d0d4f19 100644
--- a/app/frontend/src/javascript/components/events/update-recurrent-modal.tsx
+++ b/app/frontend/src/javascript/components/events/update-recurrent-modal.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Event } from '../../models/event';
 import { FabModal } from '../base/fab-modal';
diff --git a/app/frontend/src/javascript/components/form/abstract-form-item.tsx b/app/frontend/src/javascript/components/form/abstract-form-item.tsx
index d4e6f49fc..3486e1399 100644
--- a/app/frontend/src/javascript/components/form/abstract-form-item.tsx
+++ b/app/frontend/src/javascript/components/form/abstract-form-item.tsx
@@ -1,4 +1,5 @@
-import React, { PropsWithChildren, ReactNode, useEffect, useState } from 'react';
+import { PropsWithChildren, ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 import { AbstractFormComponent } from '../../models/form-component';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { get as _get } from 'lodash';
diff --git a/app/frontend/src/javascript/components/form/form-checklist.tsx b/app/frontend/src/javascript/components/form/form-checklist.tsx
index b5cc8d8a2..5a35fe4ee 100644
--- a/app/frontend/src/javascript/components/form/form-checklist.tsx
+++ b/app/frontend/src/javascript/components/form/form-checklist.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Controller, Path, FieldPathValue } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
diff --git a/app/frontend/src/javascript/components/form/form-file-upload.tsx b/app/frontend/src/javascript/components/form/form-file-upload.tsx
index 52e8e0f4d..118a028c7 100644
--- a/app/frontend/src/javascript/components/form/form-file-upload.tsx
+++ b/app/frontend/src/javascript/components/form/form-file-upload.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Path } from 'react-hook-form';
 import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';
diff --git a/app/frontend/src/javascript/components/form/form-image-upload.tsx b/app/frontend/src/javascript/components/form/form-image-upload.tsx
index 6fd9c243f..b2f858e39 100644
--- a/app/frontend/src/javascript/components/form/form-image-upload.tsx
+++ b/app/frontend/src/javascript/components/form/form-image-upload.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Path, Controller } from 'react-hook-form';
 import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';
diff --git a/app/frontend/src/javascript/components/form/form-input.tsx b/app/frontend/src/javascript/components/form/form-input.tsx
index aa022f248..ed2b14c07 100644
--- a/app/frontend/src/javascript/components/form/form-input.tsx
+++ b/app/frontend/src/javascript/components/form/form-input.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useCallback } from 'react';
+import { ReactNode, useCallback } from 'react';
+import * as React from 'react';
 import { FieldPathValue } from 'react-hook-form';
 import { debounce as _debounce } from 'lodash';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
diff --git a/app/frontend/src/javascript/components/form/form-multi-file-upload.tsx b/app/frontend/src/javascript/components/form/form-multi-file-upload.tsx
index 08a3fde47..d3b012204 100644
--- a/app/frontend/src/javascript/components/form/form-multi-file-upload.tsx
+++ b/app/frontend/src/javascript/components/form/form-multi-file-upload.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { FormFileUpload } from './form-file-upload';
 import { FabButton } from '../base/fab-button';
 import { Plus } from 'phosphor-react';
diff --git a/app/frontend/src/javascript/components/form/form-multi-image-upload.tsx b/app/frontend/src/javascript/components/form/form-multi-image-upload.tsx
index af9f66c4e..99f221958 100644
--- a/app/frontend/src/javascript/components/form/form-multi-image-upload.tsx
+++ b/app/frontend/src/javascript/components/form/form-multi-image-upload.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FormComponent, FormControlledComponent } from '../../models/form-component';
 import { AbstractFormItemProps } from './abstract-form-item';
diff --git a/app/frontend/src/javascript/components/form/form-multi-select.tsx b/app/frontend/src/javascript/components/form/form-multi-select.tsx
index 60ada9413..5c06a4cb8 100644
--- a/app/frontend/src/javascript/components/form/form-multi-select.tsx
+++ b/app/frontend/src/javascript/components/form/form-multi-select.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import AsyncSelect from 'react-select/async';
 import Select from 'react-select';
 import AsyncCreatableSelect from 'react-select/async-creatable';
@@ -39,8 +39,8 @@ type selectOption<TOptionValue> = { value: TOptionValue, label: string, select?:
 export const FormMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, tooltip, className, control, placeholder, options, valuesDefault, error, rules, disabled, onChange, formState, warning, loadOptions, creatable, selectKey }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
   const { t } = useTranslation('shared');
 
-  const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
-  const [allOptions, setAllOptions] = React.useState<Array<selectOption<TOptionValue>>>(options || []);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [allOptions, setAllOptions] = useState<Array<selectOption<TOptionValue>>>(options || []);
 
   useEffect(() => {
     if (typeof disabled === 'function') {
diff --git a/app/frontend/src/javascript/components/form/form-rich-text.tsx b/app/frontend/src/javascript/components/form/form-rich-text.tsx
index 7cef3a8c3..d4de90cf9 100644
--- a/app/frontend/src/javascript/components/form/form-rich-text.tsx
+++ b/app/frontend/src/javascript/components/form/form-rich-text.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import * as React from 'react';
 import { FormControlledComponent } from '../../models/form-component';
 import { AbstractFormItem, AbstractFormItemProps } from './abstract-form-item';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
diff --git a/app/frontend/src/javascript/components/form/form-select.tsx b/app/frontend/src/javascript/components/form/form-select.tsx
index 208170544..3ca94aeda 100644
--- a/app/frontend/src/javascript/components/form/form-select.tsx
+++ b/app/frontend/src/javascript/components/form/form-select.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import Select from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { Controller, Path } from 'react-hook-form';
@@ -22,7 +22,7 @@ interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue, T
  * This component is a wrapper for react-select to use with react-hook-form
  */
 export const FormSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue, TOptionLabel>({ id, label, tooltip, className, control, placeholder, options, valueDefault, error, warning, rules, disabled = false, onChange, clearable = false, formState, creatable = false }: FormSelectProps<TFieldValues, TContext, TOptionValue, TOptionLabel>) => {
-  const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
 
   useEffect(() => {
     if (typeof disabled === 'function') {
diff --git a/app/frontend/src/javascript/components/form/form-switch.tsx b/app/frontend/src/javascript/components/form/form-switch.tsx
index 0d6979cec..1f691efdc 100644
--- a/app/frontend/src/javascript/components/form/form-switch.tsx
+++ b/app/frontend/src/javascript/components/form/form-switch.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormControlledComponent } from '../../models/form-component';
 import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';
diff --git a/app/frontend/src/javascript/components/form/unsaved-form-alert.tsx b/app/frontend/src/javascript/components/form/unsaved-form-alert.tsx
index 87e93a7ea..c9e7b2505 100644
--- a/app/frontend/src/javascript/components/form/unsaved-form-alert.tsx
+++ b/app/frontend/src/javascript/components/form/unsaved-form-alert.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
 import { UIRouter } from '@uirouter/angularjs';
 import { FormState } from 'react-hook-form/dist/types/form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
diff --git a/app/frontend/src/javascript/components/group/change-group.tsx b/app/frontend/src/javascript/components/group/change-group.tsx
index 4477dfe02..6ed5fc1ba 100644
--- a/app/frontend/src/javascript/components/group/change-group.tsx
+++ b/app/frontend/src/javascript/components/group/change-group.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { User } from '../../models/user';
 import { Loader } from '../base/loader';
 import { IApplication } from '../../models/application';
diff --git a/app/frontend/src/javascript/components/machines/machine-card.tsx b/app/frontend/src/javascript/components/machines/machine-card.tsx
index 37b2b9160..11b1b1a66 100644
--- a/app/frontend/src/javascript/components/machines/machine-card.tsx
+++ b/app/frontend/src/javascript/components/machines/machine-card.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
+import * as React from 'react';
 import { Machine } from '../../models/machine';
 import { useTranslation } from 'react-i18next';
 import { Loader } from '../base/loader';
diff --git a/app/frontend/src/javascript/components/machines/machine-form.tsx b/app/frontend/src/javascript/components/machines/machine-form.tsx
index 405632166..3b107799f 100644
--- a/app/frontend/src/javascript/components/machines/machine-form.tsx
+++ b/app/frontend/src/javascript/components/machines/machine-form.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { Machine } from '../../models/machine';
 import MachineAPI from '../../api/machine';
diff --git a/app/frontend/src/javascript/components/machines/machines-filters.tsx b/app/frontend/src/javascript/components/machines/machines-filters.tsx
index c1218c15f..b2a9794c8 100644
--- a/app/frontend/src/javascript/components/machines/machines-filters.tsx
+++ b/app/frontend/src/javascript/components/machines/machines-filters.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Select from 'react-select';
 import { useTranslation } from 'react-i18next';
 import { SelectOption } from '../../models/select';
diff --git a/app/frontend/src/javascript/components/machines/machines-list.tsx b/app/frontend/src/javascript/components/machines/machines-list.tsx
index 0476464cf..24d1ab05e 100644
--- a/app/frontend/src/javascript/components/machines/machines-list.tsx
+++ b/app/frontend/src/javascript/components/machines/machines-list.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { Machine } from '../../models/machine';
 import { IApplication } from '../../models/application';
 import { react2angular } from 'react2angular';
diff --git a/app/frontend/src/javascript/components/machines/pending-training-modal.tsx b/app/frontend/src/javascript/components/machines/pending-training-modal.tsx
index 051eab884..51b753b57 100644
--- a/app/frontend/src/javascript/components/machines/pending-training-modal.tsx
+++ b/app/frontend/src/javascript/components/machines/pending-training-modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { FabModal } from '../base/fab-modal';
 import { useTranslation } from 'react-i18next';
 import { HtmlTranslate } from '../base/html-translate';
diff --git a/app/frontend/src/javascript/components/machines/required-training-modal.tsx b/app/frontend/src/javascript/components/machines/required-training-modal.tsx
index d1ab288fe..b52672207 100644
--- a/app/frontend/src/javascript/components/machines/required-training-modal.tsx
+++ b/app/frontend/src/javascript/components/machines/required-training-modal.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../base/fab-modal';
 import { HtmlTranslate } from '../base/html-translate';
diff --git a/app/frontend/src/javascript/components/machines/reserve-button.tsx b/app/frontend/src/javascript/components/machines/reserve-button.tsx
index 40381c61d..844a010e5 100644
--- a/app/frontend/src/javascript/components/machines/reserve-button.tsx
+++ b/app/frontend/src/javascript/components/machines/reserve-button.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { PendingTrainingModal } from './pending-training-modal';
diff --git a/app/frontend/src/javascript/components/payment-schedule/payment-schedule-item-actions.tsx b/app/frontend/src/javascript/components/payment-schedule/payment-schedule-item-actions.tsx
index 80363faee..3ca6de82c 100644
--- a/app/frontend/src/javascript/components/payment-schedule/payment-schedule-item-actions.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedule-item-actions.tsx
@@ -4,7 +4,8 @@ import {
   PaymentScheduleItem,
   PaymentScheduleItemState
 } from '../../models/payment-schedule';
-import React, { ReactElement, useState } from 'react';
+import { ReactElement, useState } from 'react';
+import * as React from 'react';
 import { FabButton } from '../base/fab-button';
 import { useTranslation } from 'react-i18next';
 import { User } from '../../models/user';
diff --git a/app/frontend/src/javascript/components/payment-schedule/payment-schedule-summary.tsx b/app/frontend/src/javascript/components/payment-schedule/payment-schedule-summary.tsx
index e888eb371..68e3fe6c9 100644
--- a/app/frontend/src/javascript/components/payment-schedule/payment-schedule-summary.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedule-summary.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import '../../lib/i18n';
diff --git a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-dashboard.tsx b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-dashboard.tsx
index 440e5ec55..1ef25d1f4 100644
--- a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-dashboard.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-dashboard.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { PaymentSchedulesTable } from './payment-schedules-table';
diff --git a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-list.tsx b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-list.tsx
index 420ef1d53..52d977729 100644
--- a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-list.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-list.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { DocumentFilters } from '../document-filters';
diff --git a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx
index 16d52c9f2..b45ddc867 100644
--- a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx
@@ -1,4 +1,5 @@
-import React, { ReactEventHandler, useState, useEffect, ReactElement } from 'react';
+import { ReactEventHandler, useState, useEffect, ReactElement } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Loader } from '../base/loader';
 import _ from 'lodash';
diff --git a/app/frontend/src/javascript/components/payment-schedule/select-schedule.tsx b/app/frontend/src/javascript/components/payment-schedule/select-schedule.tsx
index a056d5990..95f1676f1 100644
--- a/app/frontend/src/javascript/components/payment-schedule/select-schedule.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/select-schedule.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import Switch from 'react-switch';
diff --git a/app/frontend/src/javascript/components/payment-schedule/update-payment-mean-modal.tsx b/app/frontend/src/javascript/components/payment-schedule/update-payment-mean-modal.tsx
index 7e95b80ce..ad5ecaa34 100644
--- a/app/frontend/src/javascript/components/payment-schedule/update-payment-mean-modal.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/update-payment-mean-modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Select from 'react-select';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../base/fab-modal';
diff --git a/app/frontend/src/javascript/components/payment/abstract-payment-modal.tsx b/app/frontend/src/javascript/components/payment/abstract-payment-modal.tsx
index 69244f6cc..141b683b0 100644
--- a/app/frontend/src/javascript/components/payment/abstract-payment-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/abstract-payment-modal.tsx
@@ -1,4 +1,5 @@
-import React, { FunctionComponent, ReactNode, useEffect, useRef, useState } from 'react';
+import { FunctionComponent, ReactNode, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import WalletLib from '../../lib/wallet';
 import { WalletInfo } from './wallet-info';
diff --git a/app/frontend/src/javascript/components/payment/card-payment-modal.tsx b/app/frontend/src/javascript/components/payment/card-payment-modal.tsx
index eb6fba8e9..ab86dfead 100644
--- a/app/frontend/src/javascript/components/payment/card-payment-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/card-payment-modal.tsx
@@ -1,4 +1,5 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
+import * as React from 'react';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
 import { StripeModal } from './stripe/stripe-modal';
diff --git a/app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx b/app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx
index cf612adfd..3923f2adf 100644
--- a/app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx
+++ b/app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx
@@ -1,4 +1,5 @@
-import React, { FormEvent, useEffect, useState } from 'react';
+import { FormEvent, useEffect, useState } from 'react';
+import * as React from 'react';
 import Select from 'react-select';
 import { useTranslation } from 'react-i18next';
 import { GatewayFormProps } from '../abstract-payment-modal';
diff --git a/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx b/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx
index ad04b105b..dfe72fdde 100644
--- a/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx
@@ -1,4 +1,5 @@
-import React, { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
+import * as React from 'react';
 import { AbstractPaymentModal, GatewayFormProps } from '../abstract-payment-modal';
 import { LocalPaymentForm } from './local-payment-form';
 import { ShoppingCart } from '../../../models/payment';
diff --git a/app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx b/app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx
index eb1dce7f2..1fb12fafe 100644
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../../base/fab-modal';
 import { PaymentSchedule } from '../../../models/payment-schedule';
diff --git a/app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx b/app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx
index 61904af66..541880808 100644
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx
@@ -1,4 +1,5 @@
-import React, { FormEvent, FunctionComponent, useEffect, useRef, useState } from 'react';
+import { FormEvent, FunctionComponent, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 import KRGlue from '@lyracom/embedded-form-glue';
 import { GatewayFormProps } from '../abstract-payment-modal';
 import SettingAPI from '../../../api/setting';
diff --git a/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx b/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx
index 4ad4abcb5..942a6c61a 100644
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { enableMapSet } from 'immer';
 import { useImmer } from 'use-immer';
diff --git a/app/frontend/src/javascript/components/payment/payzen/payzen-modal.tsx b/app/frontend/src/javascript/components/payment/payzen/payzen-modal.tsx
index ea117b12f..d13f4f07f 100644
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-modal.tsx
@@ -1,4 +1,5 @@
-import React, { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
+import * as React from 'react';
 import { GatewayFormProps, AbstractPaymentModal } from '../abstract-payment-modal';
 import { ShoppingCart } from '../../../models/payment';
 import { PaymentSchedule } from '../../../models/payment-schedule';
diff --git a/app/frontend/src/javascript/components/payment/payzen/payzen-settings.tsx b/app/frontend/src/javascript/components/payment/payzen/payzen-settings.tsx
index 47e469006..952279851 100644
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-settings.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-settings.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { react2angular } from 'react2angular';
 import { useTranslation } from 'react-i18next';
 import { useImmer } from 'use-immer';
diff --git a/app/frontend/src/javascript/components/payment/select-gateway-modal.tsx b/app/frontend/src/javascript/components/payment/select-gateway-modal.tsx
index 23d48df7d..96e09e065 100644
--- a/app/frontend/src/javascript/components/payment/select-gateway-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/select-gateway-modal.tsx
@@ -3,7 +3,9 @@
  * The configuration of a payment gateway is required to enable the online payments.
  */
 
-import React, { BaseSyntheticEvent, useEffect, useState } from 'react';
+import { BaseSyntheticEvent, useEffect, useState } from 'react';
+
+import * as React from 'react';
 import { react2angular } from 'react2angular';
 import { useTranslation } from 'react-i18next';
 import { StripeKeysForm } from './stripe/stripe-keys-form';
diff --git a/app/frontend/src/javascript/components/payment/stripe/payment-modal.tsx b/app/frontend/src/javascript/components/payment/stripe/payment-modal.tsx
index 17c625343..60a6aa7f0 100644
--- a/app/frontend/src/javascript/components/payment/stripe/payment-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/payment-modal.tsx
@@ -2,7 +2,8 @@ import { Invoice } from '../../../models/invoice';
 import { PaymentSchedule } from '../../../models/payment-schedule';
 import { ShoppingCart } from '../../../models/payment';
 import { User } from '../../../models/user';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import WalletAPI from '../../../api/wallet';
 import { Wallet } from '../../../models/wallet';
 import WalletLib from '../../../lib/wallet';
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx
index b56d0debf..62f4ed4bd 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../../base/fab-modal';
 import { StripeCardUpdate } from './stripe-card-update';
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-card-update.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-card-update.tsx
index d6fccc677..60ec7a1ef 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-card-update.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-card-update.tsx
@@ -1,4 +1,5 @@
-import React, { FormEvent } from 'react';
+import { FormEvent } from 'react';
+import * as React from 'react';
 import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js';
 import { User } from '../../../models/user';
 import StripeAPI from '../../../api/stripe';
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-confirm-modal.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-confirm-modal.tsx
index 57d4f3c61..cf41528fb 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-confirm-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-confirm-modal.tsx
@@ -1,6 +1,7 @@
 import { StripeConfirm } from './stripe-confirm';
 import { FabModal } from '../../base/fab-modal';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import PaymentScheduleAPI from '../../../api/payment-schedule';
 import { PaymentScheduleItem } from '../../../models/payment-schedule';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-confirm.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-confirm.tsx
index fa90f404d..bc224af80 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-confirm.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-confirm.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useStripe } from '@stripe/react-stripe-js';
 import { useTranslation } from 'react-i18next';
 
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-elements.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-elements.tsx
index 8ed376168..be23281c0 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-elements.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-elements.tsx
@@ -1,4 +1,5 @@
-import React, { memo, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
+import * as React from 'react';
 import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe, Stripe } from '@stripe/stripe-js';
 import SettingAPI from '../../../api/setting';
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-form.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-form.tsx
index 826246764..10530c8e9 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-form.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-form.tsx
@@ -1,4 +1,5 @@
-import React, { FormEvent } from 'react';
+import { FormEvent } from 'react';
+import * as React from 'react';
 import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js';
 import { useTranslation } from 'react-i18next';
 import { GatewayFormProps } from '../abstract-payment-modal';
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx
index 1804cf922..73466f652 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { HtmlTranslate } from '../../base/html-translate';
 import { FabInput } from '../../base/fab-input';
diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-modal.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-modal.tsx
index 69fcb46cf..223ce30a3 100644
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-modal.tsx
@@ -1,4 +1,5 @@
-import React, { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
+import * as React from 'react';
 import { StripeElements } from './stripe-elements';
 import { StripeForm } from './stripe-form';
 import { GatewayFormProps, AbstractPaymentModal } from '../abstract-payment-modal';
diff --git a/app/frontend/src/javascript/components/payment/update-card-modal.tsx b/app/frontend/src/javascript/components/payment/update-card-modal.tsx
index 5d34d0b4c..81f54f0d4 100644
--- a/app/frontend/src/javascript/components/payment/update-card-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/update-card-modal.tsx
@@ -1,4 +1,5 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
+import * as React from 'react';
 import { Loader } from '../base/loader';
 import { StripeCardUpdateModal } from './stripe/stripe-card-update-modal';
 import { PayzenCardUpdateModal } from './payzen/payzen-card-update-modal';
diff --git a/app/frontend/src/javascript/components/payment/wallet-info.tsx b/app/frontend/src/javascript/components/payment/wallet-info.tsx
index e7f9e28e0..42efd81fb 100644
--- a/app/frontend/src/javascript/components/payment/wallet-info.tsx
+++ b/app/frontend/src/javascript/components/payment/wallet-info.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { IApplication } from '../../models/application';
diff --git a/app/frontend/src/javascript/components/plan-categories/delete-plan-category.tsx b/app/frontend/src/javascript/components/plan-categories/delete-plan-category.tsx
index cba8a1afc..1cadbddec 100644
--- a/app/frontend/src/javascript/components/plan-categories/delete-plan-category.tsx
+++ b/app/frontend/src/javascript/components/plan-categories/delete-plan-category.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import PlanCategoryAPI from '../../api/plan-category';
 import { PlanCategory } from '../../models/plan-category';
diff --git a/app/frontend/src/javascript/components/plan-categories/manage-plan-category.tsx b/app/frontend/src/javascript/components/plan-categories/manage-plan-category.tsx
index 1eca41b38..a91790e8e 100644
--- a/app/frontend/src/javascript/components/plan-categories/manage-plan-category.tsx
+++ b/app/frontend/src/javascript/components/plan-categories/manage-plan-category.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { PlanCategory } from '../../models/plan-category';
 import { FabButton } from '../base/fab-button';
diff --git a/app/frontend/src/javascript/components/plan-categories/plan-categories-list.tsx b/app/frontend/src/javascript/components/plan-categories/plan-categories-list.tsx
index 615846d89..54dd9d44e 100644
--- a/app/frontend/src/javascript/components/plan-categories/plan-categories-list.tsx
+++ b/app/frontend/src/javascript/components/plan-categories/plan-categories-list.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import PlanCategoryAPI from '../../api/plan-category';
 import { PlanCategory } from '../../models/plan-category';
diff --git a/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx b/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx
index 11bd6c3fa..3c04875a5 100644
--- a/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx
+++ b/app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import PlanCategoryAPI from '../../api/plan-category';
 import { PlanCategory } from '../../models/plan-category';
diff --git a/app/frontend/src/javascript/components/plans/partner-modal.tsx b/app/frontend/src/javascript/components/plans/partner-modal.tsx
index b9f65b6e9..5ad92fd70 100644
--- a/app/frontend/src/javascript/components/plans/partner-modal.tsx
+++ b/app/frontend/src/javascript/components/plans/partner-modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { FabModal } from '../base/fab-modal';
 import { useTranslation } from 'react-i18next';
 import { SubmitHandler, useForm } from 'react-hook-form';
diff --git a/app/frontend/src/javascript/components/plans/plan-card.tsx b/app/frontend/src/javascript/components/plans/plan-card.tsx
index eff5127cc..b116d83e8 100644
--- a/app/frontend/src/javascript/components/plans/plan-card.tsx
+++ b/app/frontend/src/javascript/components/plans/plan-card.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import moment from 'moment';
 import _ from 'lodash';
diff --git a/app/frontend/src/javascript/components/plans/plan-form.tsx b/app/frontend/src/javascript/components/plans/plan-form.tsx
index 6b36c583e..63f63b8e7 100644
--- a/app/frontend/src/javascript/components/plans/plan-form.tsx
+++ b/app/frontend/src/javascript/components/plans/plan-form.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { Interval, Plan } from '../../models/plan';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/plans/plan-pricing-form.tsx b/app/frontend/src/javascript/components/plans/plan-pricing-form.tsx
index 831a781bd..0fea147eb 100644
--- a/app/frontend/src/javascript/components/plans/plan-pricing-form.tsx
+++ b/app/frontend/src/javascript/components/plans/plan-pricing-form.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFieldArray, UseFormRegister } from 'react-hook-form';
 import { Control, FormState, UseFormSetValue } from 'react-hook-form/dist/types/form';
diff --git a/app/frontend/src/javascript/components/plans/plans-filter.tsx b/app/frontend/src/javascript/components/plans/plans-filter.tsx
index 5abbc7c31..f7e5e54fa 100644
--- a/app/frontend/src/javascript/components/plans/plans-filter.tsx
+++ b/app/frontend/src/javascript/components/plans/plans-filter.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import Select from 'react-select';
 import { useTranslation } from 'react-i18next';
 import { Group } from '../../models/group';
diff --git a/app/frontend/src/javascript/components/plans/plans-list.tsx b/app/frontend/src/javascript/components/plans/plans-list.tsx
index 40e7374aa..ed509eb37 100644
--- a/app/frontend/src/javascript/components/plans/plans-list.tsx
+++ b/app/frontend/src/javascript/components/plans/plans-list.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 import _ from 'lodash';
 import PlanAPI from '../../api/plan';
 import { Plan } from '../../models/plan';
diff --git a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx
index 1f4abde1b..02db3a0dc 100644
--- a/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx
+++ b/app/frontend/src/javascript/components/prepaid-packs/packs-summary.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import _ from 'lodash';
 import { Machine } from '../../models/machine';
 import { User } from '../../models/user';
diff --git a/app/frontend/src/javascript/components/prepaid-packs/propose-packs-modal.tsx b/app/frontend/src/javascript/components/prepaid-packs/propose-packs-modal.tsx
index 0ad1fc892..6bda64ba8 100644
--- a/app/frontend/src/javascript/components/prepaid-packs/propose-packs-modal.tsx
+++ b/app/frontend/src/javascript/components/prepaid-packs/propose-packs-modal.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { Machine } from '../../models/machine';
 import { FabModal, ModalSize } from '../base/fab-modal';
 import PrepaidPackAPI from '../../api/prepaid-pack';
diff --git a/app/frontend/src/javascript/components/pricing/editable-price.tsx b/app/frontend/src/javascript/components/pricing/editable-price.tsx
index d24fb7c20..6839202be 100644
--- a/app/frontend/src/javascript/components/pricing/editable-price.tsx
+++ b/app/frontend/src/javascript/components/pricing/editable-price.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { IFablab } from '../../models/fablab';
 import { FabInput } from '../base/fab-input';
 import { FabButton } from '../base/fab-button';
diff --git a/app/frontend/src/javascript/components/pricing/machines/configure-packs-button.tsx b/app/frontend/src/javascript/components/pricing/machines/configure-packs-button.tsx
index e3e0618f8..cdf77131f 100644
--- a/app/frontend/src/javascript/components/pricing/machines/configure-packs-button.tsx
+++ b/app/frontend/src/javascript/components/pricing/machines/configure-packs-button.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
+import * as React from 'react';
 import { PrepaidPack } from '../../../models/prepaid-pack';
 import { useTranslation } from 'react-i18next';
 import { FabPopover } from '../../base/fab-popover';
diff --git a/app/frontend/src/javascript/components/pricing/machines/create-pack.tsx b/app/frontend/src/javascript/components/pricing/machines/create-pack.tsx
index 4d457bcd3..d6905fcbf 100644
--- a/app/frontend/src/javascript/components/pricing/machines/create-pack.tsx
+++ b/app/frontend/src/javascript/components/pricing/machines/create-pack.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { FabModal } from '../../base/fab-modal';
 import { PackForm } from './pack-form';
 import { PrepaidPack } from '../../../models/prepaid-pack';
diff --git a/app/frontend/src/javascript/components/pricing/machines/delete-pack.tsx b/app/frontend/src/javascript/components/pricing/machines/delete-pack.tsx
index 19c46b2f1..2652ef6f4 100644
--- a/app/frontend/src/javascript/components/pricing/machines/delete-pack.tsx
+++ b/app/frontend/src/javascript/components/pricing/machines/delete-pack.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabButton } from '../../base/fab-button';
 import { FabModal } from '../../base/fab-modal';
diff --git a/app/frontend/src/javascript/components/pricing/machines/edit-pack.tsx b/app/frontend/src/javascript/components/pricing/machines/edit-pack.tsx
index 7af5c7507..fb1db3ac5 100644
--- a/app/frontend/src/javascript/components/pricing/machines/edit-pack.tsx
+++ b/app/frontend/src/javascript/components/pricing/machines/edit-pack.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { FabModal } from '../../base/fab-modal';
 import { PackForm } from './pack-form';
 import { PrepaidPack } from '../../../models/prepaid-pack';
diff --git a/app/frontend/src/javascript/components/pricing/machines/machines-pricing.tsx b/app/frontend/src/javascript/components/pricing/machines/machines-pricing.tsx
index 3df72caf9..d4ff589d2 100644
--- a/app/frontend/src/javascript/components/pricing/machines/machines-pricing.tsx
+++ b/app/frontend/src/javascript/components/pricing/machines/machines-pricing.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../../base/loader';
diff --git a/app/frontend/src/javascript/components/pricing/machines/pack-form.tsx b/app/frontend/src/javascript/components/pricing/machines/pack-form.tsx
index 43c5b4820..a5c7884f2 100644
--- a/app/frontend/src/javascript/components/pricing/machines/pack-form.tsx
+++ b/app/frontend/src/javascript/components/pricing/machines/pack-form.tsx
@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent } from 'react';
+import { BaseSyntheticEvent } from 'react';
+import * as React from 'react';
 import Select from 'react-select';
 import Switch from 'react-switch';
 import { PrepaidPack } from '../../../models/prepaid-pack';
diff --git a/app/frontend/src/javascript/components/pricing/spaces/configure-extended-prices-button.tsx b/app/frontend/src/javascript/components/pricing/spaces/configure-extended-prices-button.tsx
index e8e7d20e1..826d8e9b1 100644
--- a/app/frontend/src/javascript/components/pricing/spaces/configure-extended-prices-button.tsx
+++ b/app/frontend/src/javascript/components/pricing/spaces/configure-extended-prices-button.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
+import * as React from 'react';
 import { Price } from '../../../models/price';
 import { useTranslation } from 'react-i18next';
 import { FabPopover } from '../../base/fab-popover';
diff --git a/app/frontend/src/javascript/components/pricing/spaces/create-extended-price.tsx b/app/frontend/src/javascript/components/pricing/spaces/create-extended-price.tsx
index 082cab8ad..9e789e014 100644
--- a/app/frontend/src/javascript/components/pricing/spaces/create-extended-price.tsx
+++ b/app/frontend/src/javascript/components/pricing/spaces/create-extended-price.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { FabModal } from '../../base/fab-modal';
 import { ExtendedPriceForm } from './extended-price-form';
 import { Price } from '../../../models/price';
diff --git a/app/frontend/src/javascript/components/pricing/spaces/delete-extended-price.tsx b/app/frontend/src/javascript/components/pricing/spaces/delete-extended-price.tsx
index 75931d2b5..e0f2851c9 100644
--- a/app/frontend/src/javascript/components/pricing/spaces/delete-extended-price.tsx
+++ b/app/frontend/src/javascript/components/pricing/spaces/delete-extended-price.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabButton } from '../../base/fab-button';
 import { FabModal } from '../../base/fab-modal';
diff --git a/app/frontend/src/javascript/components/pricing/spaces/edit-extended-price.tsx b/app/frontend/src/javascript/components/pricing/spaces/edit-extended-price.tsx
index 3b1608a29..55b6eee55 100644
--- a/app/frontend/src/javascript/components/pricing/spaces/edit-extended-price.tsx
+++ b/app/frontend/src/javascript/components/pricing/spaces/edit-extended-price.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { FabModal } from '../../base/fab-modal';
 import { ExtendedPriceForm } from './extended-price-form';
 import { Price } from '../../../models/price';
diff --git a/app/frontend/src/javascript/components/pricing/spaces/extended-price-form.tsx b/app/frontend/src/javascript/components/pricing/spaces/extended-price-form.tsx
index b9a2e0251..e548b44fc 100644
--- a/app/frontend/src/javascript/components/pricing/spaces/extended-price-form.tsx
+++ b/app/frontend/src/javascript/components/pricing/spaces/extended-price-form.tsx
@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent } from 'react';
+import { BaseSyntheticEvent } from 'react';
+import * as React from 'react';
 import { Price } from '../../../models/price';
 import { useTranslation } from 'react-i18next';
 import { useImmer } from 'use-immer';
diff --git a/app/frontend/src/javascript/components/pricing/spaces/spaces-pricing.tsx b/app/frontend/src/javascript/components/pricing/spaces/spaces-pricing.tsx
index 2772cb9c7..14f9770c9 100644
--- a/app/frontend/src/javascript/components/pricing/spaces/spaces-pricing.tsx
+++ b/app/frontend/src/javascript/components/pricing/spaces/spaces-pricing.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../../base/loader';
diff --git a/app/frontend/src/javascript/components/profile-completion/completion-header-info.tsx b/app/frontend/src/javascript/components/profile-completion/completion-header-info.tsx
index 7b66a8d9e..63ed4ab25 100644
--- a/app/frontend/src/javascript/components/profile-completion/completion-header-info.tsx
+++ b/app/frontend/src/javascript/components/profile-completion/completion-header-info.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import * as React from 'react';
 import { ActiveProviderResponse } from '../../models/authentication-provider';
 import { useTranslation } from 'react-i18next';
 import { User } from '../../models/user';
diff --git a/app/frontend/src/javascript/components/profile-completion/profile-form-option.tsx b/app/frontend/src/javascript/components/profile-completion/profile-form-option.tsx
index ee5a31494..261bf1cb0 100644
--- a/app/frontend/src/javascript/components/profile-completion/profile-form-option.tsx
+++ b/app/frontend/src/javascript/components/profile-completion/profile-form-option.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { User } from '../../models/user';
 import { IApplication } from '../../models/application';
 import { Loader } from '../base/loader';
diff --git a/app/frontend/src/javascript/components/profile-custom-fields/profile-custom-fields-list.tsx b/app/frontend/src/javascript/components/profile-custom-fields/profile-custom-fields-list.tsx
index c2fc04839..b486c536b 100644
--- a/app/frontend/src/javascript/components/profile-custom-fields/profile-custom-fields-list.tsx
+++ b/app/frontend/src/javascript/components/profile-custom-fields/profile-custom-fields-list.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect, BaseSyntheticEvent } from 'react';
+import { useState, useEffect, BaseSyntheticEvent } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import Switch from 'react-switch';
diff --git a/app/frontend/src/javascript/components/settings/boolean-setting.tsx b/app/frontend/src/javascript/components/settings/boolean-setting.tsx
index e40f717b0..0242eb83f 100644
--- a/app/frontend/src/javascript/components/settings/boolean-setting.tsx
+++ b/app/frontend/src/javascript/components/settings/boolean-setting.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import Switch from 'react-switch';
 import _ from 'lodash';
 import { AxiosResponse } from 'axios';
diff --git a/app/frontend/src/javascript/components/settings/check-list-setting.tsx b/app/frontend/src/javascript/components/settings/check-list-setting.tsx
index f0daed909..2150e1d74 100644
--- a/app/frontend/src/javascript/components/settings/check-list-setting.tsx
+++ b/app/frontend/src/javascript/components/settings/check-list-setting.tsx
@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent, useEffect, useState } from 'react';
+import { BaseSyntheticEvent, useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import { SettingName } from '../../models/setting';
diff --git a/app/frontend/src/javascript/components/settings/user-validation-setting.tsx b/app/frontend/src/javascript/components/settings/user-validation-setting.tsx
index 9c65b5ed3..673d129df 100644
--- a/app/frontend/src/javascript/components/settings/user-validation-setting.tsx
+++ b/app/frontend/src/javascript/components/settings/user-validation-setting.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SettingName } from '../../models/setting';
 import { IApplication } from '../../models/application';
diff --git a/app/frontend/src/javascript/components/socials/edit-socials.tsx b/app/frontend/src/javascript/components/socials/edit-socials.tsx
index 0c965040b..58b426500 100644
--- a/app/frontend/src/javascript/components/socials/edit-socials.tsx
+++ b/app/frontend/src/javascript/components/socials/edit-socials.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useReducer } from 'react';
+import { useState, useReducer } from 'react';
 import { FormState, UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { User } from '../../models/user';
diff --git a/app/frontend/src/javascript/components/socials/fab-socials.tsx b/app/frontend/src/javascript/components/socials/fab-socials.tsx
index 223a7327c..eb56a1d95 100644
--- a/app/frontend/src/javascript/components/socials/fab-socials.tsx
+++ b/app/frontend/src/javascript/components/socials/fab-socials.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useForm } from 'react-hook-form';
 import { FormInput } from '../form/form-input';
 import SettingAPI from '../../api/setting';
diff --git a/app/frontend/src/javascript/components/spaces/space-form.tsx b/app/frontend/src/javascript/components/spaces/space-form.tsx
index 16ffabd70..2df3e4c60 100644
--- a/app/frontend/src/javascript/components/spaces/space-form.tsx
+++ b/app/frontend/src/javascript/components/spaces/space-form.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import SpaceAPI from '../../api/space';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/store/categories/manage-product-category.tsx b/app/frontend/src/javascript/components/store/categories/manage-product-category.tsx
index cf03ae9bd..c5a288332 100644
--- a/app/frontend/src/javascript/components/store/categories/manage-product-category.tsx
+++ b/app/frontend/src/javascript/components/store/categories/manage-product-category.tsx
@@ -1,5 +1,6 @@
 import { PencilSimple, Trash } from 'phosphor-react';
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ProductCategory } from '../../../models/product-category';
 import { FabButton } from '../../base/fab-button';
diff --git a/app/frontend/src/javascript/components/store/categories/product-categories-item.tsx b/app/frontend/src/javascript/components/store/categories/product-categories-item.tsx
index 391c27640..6e851df62 100644
--- a/app/frontend/src/javascript/components/store/categories/product-categories-item.tsx
+++ b/app/frontend/src/javascript/components/store/categories/product-categories-item.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ProductCategory } from '../../../models/product-category';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
diff --git a/app/frontend/src/javascript/components/store/categories/product-categories-tree.tsx b/app/frontend/src/javascript/components/store/categories/product-categories-tree.tsx
index 8b7e6b10a..a7ab0ecaa 100644
--- a/app/frontend/src/javascript/components/store/categories/product-categories-tree.tsx
+++ b/app/frontend/src/javascript/components/store/categories/product-categories-tree.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import * as React from 'react';
 import { useImmer } from 'use-immer';
 import { ProductCategory } from '../../../models/product-category';
 import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, closestCenter, DragMoveEvent } from '@dnd-kit/core';
diff --git a/app/frontend/src/javascript/components/store/categories/product-categories.tsx b/app/frontend/src/javascript/components/store/categories/product-categories.tsx
index 4cb5590d5..5836ea76d 100644
--- a/app/frontend/src/javascript/components/store/categories/product-categories.tsx
+++ b/app/frontend/src/javascript/components/store/categories/product-categories.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ProductCategory } from '../../../models/product-category';
 import ProductCategoryAPI from '../../../api/product-category';
diff --git a/app/frontend/src/javascript/components/store/categories/product-category-form.tsx b/app/frontend/src/javascript/components/store/categories/product-category-form.tsx
index 74fd0be03..510a68498 100644
--- a/app/frontend/src/javascript/components/store/categories/product-category-form.tsx
+++ b/app/frontend/src/javascript/components/store/categories/product-category-form.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import slugify from 'slugify';
diff --git a/app/frontend/src/javascript/components/store/clone-product-modal.tsx b/app/frontend/src/javascript/components/store/clone-product-modal.tsx
index 70c225a96..4865a00ed 100644
--- a/app/frontend/src/javascript/components/store/clone-product-modal.tsx
+++ b/app/frontend/src/javascript/components/store/clone-product-modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { FormInput } from '../form/form-input';
 import { FormSwitch } from '../form/form-switch';
diff --git a/app/frontend/src/javascript/components/store/edit-product.tsx b/app/frontend/src/javascript/components/store/edit-product.tsx
index 20680df9f..5b4344d4b 100644
--- a/app/frontend/src/javascript/components/store/edit-product.tsx
+++ b/app/frontend/src/javascript/components/store/edit-product.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
diff --git a/app/frontend/src/javascript/components/store/filters/active-filters-tags.tsx b/app/frontend/src/javascript/components/store/filters/active-filters-tags.tsx
index 6c5fbcd1e..8e9a5beb6 100644
--- a/app/frontend/src/javascript/components/store/filters/active-filters-tags.tsx
+++ b/app/frontend/src/javascript/components/store/filters/active-filters-tags.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import _ from 'lodash';
 import { ProductIndexFilter } from '../../../models/product';
 import { X } from 'phosphor-react';
diff --git a/app/frontend/src/javascript/components/store/filters/categories-filter.tsx b/app/frontend/src/javascript/components/store/filters/categories-filter.tsx
index d08dcc33d..2068820f8 100644
--- a/app/frontend/src/javascript/components/store/filters/categories-filter.tsx
+++ b/app/frontend/src/javascript/components/store/filters/categories-filter.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import _ from 'lodash';
 import ProductLib from '../../../lib/product';
 import { ProductCategory } from '../../../models/product-category';
diff --git a/app/frontend/src/javascript/components/store/filters/keyword-filter.tsx b/app/frontend/src/javascript/components/store/filters/keyword-filter.tsx
index be7573213..fe189237b 100644
--- a/app/frontend/src/javascript/components/store/filters/keyword-filter.tsx
+++ b/app/frontend/src/javascript/components/store/filters/keyword-filter.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { FabButton } from '../../base/fab-button';
 import { AccordionItem } from '../../base/accordion-item';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/store/filters/machines-filter.tsx b/app/frontend/src/javascript/components/store/filters/machines-filter.tsx
index a0537ea48..7113eebeb 100644
--- a/app/frontend/src/javascript/components/store/filters/machines-filter.tsx
+++ b/app/frontend/src/javascript/components/store/filters/machines-filter.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { FabButton } from '../../base/fab-button';
 import { AccordionItem } from '../../base/accordion-item';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/store/filters/stock-filter.tsx b/app/frontend/src/javascript/components/store/filters/stock-filter.tsx
index ba2497959..c8c5c4625 100644
--- a/app/frontend/src/javascript/components/store/filters/stock-filter.tsx
+++ b/app/frontend/src/javascript/components/store/filters/stock-filter.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { FabButton } from '../../base/fab-button';
 import { AccordionItem } from '../../base/accordion-item';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/store/new-product.tsx b/app/frontend/src/javascript/components/store/new-product.tsx
index 17b5711ec..644ec9bb4 100644
--- a/app/frontend/src/javascript/components/store/new-product.tsx
+++ b/app/frontend/src/javascript/components/store/new-product.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
diff --git a/app/frontend/src/javascript/components/store/order-actions.tsx b/app/frontend/src/javascript/components/store/order-actions.tsx
index a339fff2e..d9556fca8 100644
--- a/app/frontend/src/javascript/components/store/order-actions.tsx
+++ b/app/frontend/src/javascript/components/store/order-actions.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import Select from 'react-select';
 import { FabModal } from '../base/fab-modal';
diff --git a/app/frontend/src/javascript/components/store/order-item.tsx b/app/frontend/src/javascript/components/store/order-item.tsx
index 4eb34086d..22d94cf89 100644
--- a/app/frontend/src/javascript/components/store/order-item.tsx
+++ b/app/frontend/src/javascript/components/store/order-item.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Order } from '../../models/order';
 import FormatLib from '../../lib/format';
diff --git a/app/frontend/src/javascript/components/store/orders.tsx b/app/frontend/src/javascript/components/store/orders.tsx
index f0b1dca8d..578c5d189 100644
--- a/app/frontend/src/javascript/components/store/orders.tsx
+++ b/app/frontend/src/javascript/components/store/orders.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useImmer } from 'use-immer';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
diff --git a/app/frontend/src/javascript/components/store/product-form.tsx b/app/frontend/src/javascript/components/store/product-form.tsx
index f2959415a..9d3849056 100644
--- a/app/frontend/src/javascript/components/store/product-form.tsx
+++ b/app/frontend/src/javascript/components/store/product-form.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import slugify from 'slugify';
diff --git a/app/frontend/src/javascript/components/store/product-item.tsx b/app/frontend/src/javascript/components/store/product-item.tsx
index 298d231c9..a8e252304 100644
--- a/app/frontend/src/javascript/components/store/product-item.tsx
+++ b/app/frontend/src/javascript/components/store/product-item.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabButton } from '../base/fab-button';
 import { Product } from '../../models/product';
diff --git a/app/frontend/src/javascript/components/store/product-price.tsx b/app/frontend/src/javascript/components/store/product-price.tsx
index 0e868b0fa..b196dd770 100644
--- a/app/frontend/src/javascript/components/store/product-price.tsx
+++ b/app/frontend/src/javascript/components/store/product-price.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Product } from '../../models/product';
 import FormatLib from '../../lib/format';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/store/product-stock-form.tsx b/app/frontend/src/javascript/components/store/product-stock-form.tsx
index 7e5162b30..a954afa37 100644
--- a/app/frontend/src/javascript/components/store/product-stock-form.tsx
+++ b/app/frontend/src/javascript/components/store/product-stock-form.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Select from 'react-select';
 import { PencilSimple, X } from 'phosphor-react';
 import { useFieldArray, UseFormRegister } from 'react-hook-form';
diff --git a/app/frontend/src/javascript/components/store/product-stock-modal.tsx b/app/frontend/src/javascript/components/store/product-stock-modal.tsx
index dec8cea69..0e0ef2785 100644
--- a/app/frontend/src/javascript/components/store/product-stock-modal.tsx
+++ b/app/frontend/src/javascript/components/store/product-stock-modal.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   ProductStockMovement,
diff --git a/app/frontend/src/javascript/components/store/products.tsx b/app/frontend/src/javascript/components/store/products.tsx
index 77b8a1375..2f94b9367 100644
--- a/app/frontend/src/javascript/components/store/products.tsx
+++ b/app/frontend/src/javascript/components/store/products.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useImmer } from 'use-immer';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
diff --git a/app/frontend/src/javascript/components/store/show-order.tsx b/app/frontend/src/javascript/components/store/show-order.tsx
index 9294c81c9..13ffcf8cd 100644
--- a/app/frontend/src/javascript/components/store/show-order.tsx
+++ b/app/frontend/src/javascript/components/store/show-order.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { IApplication } from '../../models/application';
 import { User } from '../../models/user';
diff --git a/app/frontend/src/javascript/components/store/store-list-header.tsx b/app/frontend/src/javascript/components/store/store-list-header.tsx
index 5bd6014a1..fbfea00fe 100644
--- a/app/frontend/src/javascript/components/store/store-list-header.tsx
+++ b/app/frontend/src/javascript/components/store/store-list-header.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import Select from 'react-select';
 import Switch from 'react-switch';
diff --git a/app/frontend/src/javascript/components/store/store-product-item.tsx b/app/frontend/src/javascript/components/store/store-product-item.tsx
index b9e3c4a15..eb1c42145 100644
--- a/app/frontend/src/javascript/components/store/store-product-item.tsx
+++ b/app/frontend/src/javascript/components/store/store-product-item.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import { FabButton } from '../base/fab-button';
diff --git a/app/frontend/src/javascript/components/store/store-product.tsx b/app/frontend/src/javascript/components/store/store-product.tsx
index 64544599e..e7fec16b6 100644
--- a/app/frontend/src/javascript/components/store/store-product.tsx
+++ b/app/frontend/src/javascript/components/store/store-product.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
diff --git a/app/frontend/src/javascript/components/store/store-settings.tsx b/app/frontend/src/javascript/components/store/store-settings.tsx
index e0b8d6165..9a6c9aa82 100644
--- a/app/frontend/src/javascript/components/store/store-settings.tsx
+++ b/app/frontend/src/javascript/components/store/store-settings.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import * as React from 'react';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
 import { IApplication } from '../../models/application';
diff --git a/app/frontend/src/javascript/components/store/store.tsx b/app/frontend/src/javascript/components/store/store.tsx
index 7177a519b..f64e1646b 100644
--- a/app/frontend/src/javascript/components/store/store.tsx
+++ b/app/frontend/src/javascript/components/store/store.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
diff --git a/app/frontend/src/javascript/components/subscriptions/free-extend-modal.tsx b/app/frontend/src/javascript/components/subscriptions/free-extend-modal.tsx
index 51b191ae2..adbaec170 100644
--- a/app/frontend/src/javascript/components/subscriptions/free-extend-modal.tsx
+++ b/app/frontend/src/javascript/components/subscriptions/free-extend-modal.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { Subscription } from '../../models/subscription';
 import { FabModal, ModalSize } from '../base/fab-modal';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/subscriptions/renew-modal.tsx b/app/frontend/src/javascript/components/subscriptions/renew-modal.tsx
index e04140648..d587d464f 100644
--- a/app/frontend/src/javascript/components/subscriptions/renew-modal.tsx
+++ b/app/frontend/src/javascript/components/subscriptions/renew-modal.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { Subscription } from '../../models/subscription';
 import { FabModal, ModalSize } from '../base/fab-modal';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/subscriptions/subscribe-modal.tsx b/app/frontend/src/javascript/components/subscriptions/subscribe-modal.tsx
index 2607d922a..eea8e3c6b 100644
--- a/app/frontend/src/javascript/components/subscriptions/subscribe-modal.tsx
+++ b/app/frontend/src/javascript/components/subscriptions/subscribe-modal.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import Select from 'react-select';
 import { useTranslation } from 'react-i18next';
 import { Subscription } from '../../models/subscription';
diff --git a/app/frontend/src/javascript/components/supporting-documents/delete-supporting-documents-type-modal.tsx b/app/frontend/src/javascript/components/supporting-documents/delete-supporting-documents-type-modal.tsx
index f581320eb..2b804626f 100644
--- a/app/frontend/src/javascript/components/supporting-documents/delete-supporting-documents-type-modal.tsx
+++ b/app/frontend/src/javascript/components/supporting-documents/delete-supporting-documents-type-modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../base/fab-modal';
 import ProofOfIdentityTypeAPI from '../../api/proof-of-identity-type';
diff --git a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-files.tsx b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-files.tsx
index 7af15beb6..fcece79b0 100644
--- a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-files.tsx
+++ b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-files.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import _ from 'lodash';
diff --git a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-refusal-form.tsx b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-refusal-form.tsx
index 0d7652e70..c3cc8f832 100644
--- a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-refusal-form.tsx
+++ b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-refusal-form.tsx
@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent, useState } from 'react';
+import { BaseSyntheticEvent, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ProofOfIdentityType } from '../../models/proof-of-identity-type';
 
diff --git a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-refusal-modal.tsx b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-refusal-modal.tsx
index 4a3689458..b4c8f0e3f 100644
--- a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-refusal-modal.tsx
+++ b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-refusal-modal.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../base/fab-modal';
 import { ProofOfIdentityType } from '../../models/proof-of-identity-type';
diff --git a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-type-form.tsx b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-type-form.tsx
index f940409c7..7b48e0995 100644
--- a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-type-form.tsx
+++ b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-type-form.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import Select from 'react-select';
 import { FabInput } from '../base/fab-input';
diff --git a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-type-modal.tsx b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-type-modal.tsx
index 489abd4ed..b79cb9757 100644
--- a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-type-modal.tsx
+++ b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-type-modal.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../base/fab-modal';
 import { ProofOfIdentityType } from '../../models/proof-of-identity-type';
diff --git a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-types-list.tsx b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-types-list.tsx
index 02c5d23d7..e9b99097e 100644
--- a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-types-list.tsx
+++ b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-types-list.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import _ from 'lodash';
diff --git a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-validation.tsx b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-validation.tsx
index 3a54a2273..ca92006fd 100644
--- a/app/frontend/src/javascript/components/supporting-documents/supporting-documents-validation.tsx
+++ b/app/frontend/src/javascript/components/supporting-documents/supporting-documents-validation.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import _ from 'lodash';
diff --git a/app/frontend/src/javascript/components/trainings/training-form.tsx b/app/frontend/src/javascript/components/trainings/training-form.tsx
index 6d359a02b..02fa80763 100644
--- a/app/frontend/src/javascript/components/trainings/training-form.tsx
+++ b/app/frontend/src/javascript/components/trainings/training-form.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { FormInput } from '../form/form-input';
diff --git a/app/frontend/src/javascript/components/user/avatar-input.tsx b/app/frontend/src/javascript/components/user/avatar-input.tsx
index 1f2b3ae7b..6a9754330 100644
--- a/app/frontend/src/javascript/components/user/avatar-input.tsx
+++ b/app/frontend/src/javascript/components/user/avatar-input.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 
 import { FabButton } from '../base/fab-button';
 import { Path, UseFormRegister } from 'react-hook-form';
diff --git a/app/frontend/src/javascript/components/user/avatar.tsx b/app/frontend/src/javascript/components/user/avatar.tsx
index aba07a0c1..c6ae97537 100644
--- a/app/frontend/src/javascript/components/user/avatar.tsx
+++ b/app/frontend/src/javascript/components/user/avatar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import noAvatar from '../../../../images/no_avatar.png';
 
diff --git a/app/frontend/src/javascript/components/user/change-password.tsx b/app/frontend/src/javascript/components/user/change-password.tsx
index d0307476d..cb85d4607 100644
--- a/app/frontend/src/javascript/components/user/change-password.tsx
+++ b/app/frontend/src/javascript/components/user/change-password.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import * as React from 'react';
 import { FabButton } from '../base/fab-button';
 import { FabModal } from '../base/fab-modal';
 import { FormInput } from '../form/form-input';
diff --git a/app/frontend/src/javascript/components/user/change-role-modal.tsx b/app/frontend/src/javascript/components/user/change-role-modal.tsx
index a13ebb05f..6183f4b4a 100644
--- a/app/frontend/src/javascript/components/user/change-role-modal.tsx
+++ b/app/frontend/src/javascript/components/user/change-role-modal.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { FabModal, ModalSize } from '../base/fab-modal';
 import { User, UserRole } from '../../models/user';
 import { IApplication } from '../../models/application';
diff --git a/app/frontend/src/javascript/components/user/gender-input.tsx b/app/frontend/src/javascript/components/user/gender-input.tsx
index d898b8a5c..66d3dc071 100644
--- a/app/frontend/src/javascript/components/user/gender-input.tsx
+++ b/app/frontend/src/javascript/components/user/gender-input.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
@@ -15,7 +15,7 @@ interface GenderInputProps<TFieldValues> {
 export const GenderInput = <TFieldValues extends FieldValues>({ register, disabled = false }: GenderInputProps<TFieldValues>) => {
   const { t } = useTranslation('shared');
 
-  const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
 
   useEffect(() => {
     if (typeof disabled === 'function') {
diff --git a/app/frontend/src/javascript/components/user/member-select.tsx b/app/frontend/src/javascript/components/user/member-select.tsx
index 35b7f9416..a709d9da9 100644
--- a/app/frontend/src/javascript/components/user/member-select.tsx
+++ b/app/frontend/src/javascript/components/user/member-select.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import AsyncSelect from 'react-select/async';
 import { useTranslation } from 'react-i18next';
 import MemberAPI from '../../api/member';
diff --git a/app/frontend/src/javascript/components/user/password-input.tsx b/app/frontend/src/javascript/components/user/password-input.tsx
index 7ac184a15..4070dfa7f 100644
--- a/app/frontend/src/javascript/components/user/password-input.tsx
+++ b/app/frontend/src/javascript/components/user/password-input.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { useTranslation } from 'react-i18next';
diff --git a/app/frontend/src/javascript/components/user/user-profile-form.tsx b/app/frontend/src/javascript/components/user/user-profile-form.tsx
index f7fbee376..71d66d9c8 100644
--- a/app/frontend/src/javascript/components/user/user-profile-form.tsx
+++ b/app/frontend/src/javascript/components/user/user-profile-form.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { react2angular } from 'react2angular';
 import { useForm, useWatch, ValidateResult } from 'react-hook-form';
 import { isNil as _isNil } from 'lodash';
diff --git a/app/frontend/src/javascript/components/user/user-validation.tsx b/app/frontend/src/javascript/components/user/user-validation.tsx
index c1374758e..104ff0de8 100644
--- a/app/frontend/src/javascript/components/user/user-validation.tsx
+++ b/app/frontend/src/javascript/components/user/user-validation.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import Switch from 'react-switch';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
diff --git a/babel.config.js b/babel.config.js
index cf0f741ec..c1e583c45 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -24,7 +24,8 @@ module.exports = function (api) {
         '@babel/preset-react',
         {
           development: isDevelopmentEnv || isTestEnv,
-          useBuiltIns: true
+          useBuiltIns: true,
+          runtime: 'automatic'
         }
       ]
     ].filter(Boolean),
diff --git a/tsconfig.dev.json b/tsconfig.dev.json
new file mode 100644
index 000000000..91873fa1d
--- /dev/null
+++ b/tsconfig.dev.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsxdev"
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 696ff4212..4d9b910b3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,8 +7,8 @@
     "module": "ES2020",
     "moduleResolution": "node",
     "sourceMap": true,
-    "target": "es5",
-    "jsx": "react",
+    "target": "es2015",
+    "jsx": "react-jsx",
     "noEmit": true,
     "allowSyntheticDefaultImports": true,
     "downlevelIteration": true,