From 540c41ff64a3fb03a60152760816b12709d0f049 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Wed, 22 Mar 2023 16:45:10 +0800
Subject: [PATCH] refactor(console): use function-declaration for named
 components (#3520)

* refactor(console): use function-declaration for named components

Application Insights can only automatically track component names from function
declaration. update convention to make tracking easier.

* refactor(console): fix lint errors
---
 packages/console/package.json                 |  11 +-
 packages/console/src/App.tsx                  |   8 +-
 packages/console/src/cloud/App.tsx            |   4 +-
 .../src/cloud/pages/Callback/index.tsx        |   4 +-
 .../console/src/cloud/pages/Main/Redirect.tsx |   4 +-
 .../console/src/cloud/pages/Main/Tenants.tsx  |   4 +-
 .../console/src/cloud/pages/Main/index.tsx    |   8 +-
 .../cloud/pages/SocialDemoCallback/index.tsx  |   4 +-
 .../src/components/ActionMenu/index.tsx       |   6 +-
 .../console/src/components/Alert/index.tsx    |   6 +-
 .../console/src/components/AppError/index.tsx |   4 +-
 .../src/components/AppLoading/index.tsx       |   4 +-
 .../src/components/ApplicationIcon/index.tsx  |   4 +-
 .../src/components/ApplicationName/index.tsx  |   4 +-
 .../components/ApplicationSelector/index.tsx  |   4 +-
 .../components/EventName/index.tsx            |   4 +-
 .../components/EventSelector/index.tsx        |   4 +-
 .../src/components/AuditLogTable/index.tsx    |   4 +-
 .../console/src/components/Button/index.tsx   |   6 +-
 .../console/src/components/Card/index.tsx     |   4 +-
 .../src/components/CardTitle/index.tsx        |   6 +-
 .../console/src/components/Checkbox/index.tsx |   6 +-
 .../src/components/CodeEditor/index.tsx       |   6 +-
 .../src/components/ColorPicker/index.tsx      |   4 +-
 .../src/components/ConfirmModal/index.tsx     |   6 +-
 .../src/components/ConnectorLogo/index.tsx    |   4 +-
 .../src/components/CopyToClipboard/index.tsx  |   6 +-
 .../src/components/DangerousRaw/index.tsx     |   4 +-
 .../console/src/components/DateTime/index.tsx |   4 +-
 .../components/DeleteConfirmModal/index.tsx   |   6 +-
 .../src/components/DetailsForm/index.tsx      |   6 +-
 .../src/components/DetailsSkeleton/index.tsx  |  56 ++--
 .../console/src/components/Divider/index.tsx  |   4 +-
 .../components/DragDrop/DragDropProvider.tsx  |   4 +-
 .../src/components/DragDrop/DraggableItem.tsx |   6 +-
 .../console/src/components/Drawer/index.tsx   |   4 +-
 .../src/components/Dropdown/DropdownItem.tsx  |  28 +-
 .../console/src/components/Dropdown/index.tsx |  14 +-
 .../components/EmptyDataPlaceholder/index.tsx |   4 +-
 .../console/src/components/FormCard/index.tsx |   4 +-
 .../src/components/FormField/index.tsx        |   6 +-
 .../src/components/IconButton/index.tsx       |   6 +-
 .../ImageWithErrorFallback/index.tsx          |   6 +-
 .../console/src/components/Index/index.tsx    |  26 +-
 .../src/components/ItemPreview/index.tsx      |   4 +-
 .../components/LivePreviewButton/index.tsx    |   4 +-
 .../components/GithubRawImage/index.tsx       |   4 +-
 .../console/src/components/Markdown/index.tsx |   4 +-
 .../src/components/ModalLayout/index.tsx      |   6 +-
 .../src/components/MultiTextInput/index.tsx   |   6 +-
 .../components/MultiTextInputField/index.tsx  |  26 +-
 .../src/components/OverlayScrollbar/index.tsx |  14 +-
 .../src/components/Pagination/Next.tsx        |   4 +-
 .../src/components/Pagination/Previous.tsx    |   4 +-
 .../src/components/Pagination/index.tsx       |  11 +-
 .../src/components/PermissionsTable/index.tsx |   6 +-
 .../src/components/RadioGroup/Radio.tsx       |  24 +-
 .../src/components/RadioGroup/index.tsx       |   6 +-
 .../src/components/RequestDataError/index.tsx |   4 +-
 .../components/ResourceItem/index.tsx         |   4 +-
 .../components/SourceScopeItem/index.tsx      |  46 ++--
 .../components/SourceScopesBox/index.tsx      |   4 +-
 .../components/TargetScopeItem/index.tsx      |   4 +-
 .../components/TargetScopesBox/index.tsx      |   4 +-
 .../components/RoleScopesTransfer/index.tsx   |  16 +-
 .../components/SourceUserItem/index.tsx       |   4 +-
 .../components/SourceUsersBox/index.tsx       |   4 +-
 .../components/TargetUserItem/index.tsx       |   4 +-
 .../components/TargetUsersBox/index.tsx       |   4 +-
 .../components/RoleUsersTransfer/index.tsx    |  16 +-
 .../console/src/components/Search/index.tsx   |   6 +-
 .../console/src/components/Select/index.tsx   |   6 +-
 .../src/components/SessionExpired/index.tsx   |   4 +-
 .../components/ToggleUiThemeButton/index.tsx  |   6 +-
 .../SignInExperiencePreview/index.tsx         |   4 +-
 .../console/src/components/Spacer/index.tsx   |   4 +-
 .../console/src/components/Spinner/index.tsx  | 258 +++++++++---------
 .../console/src/components/Status/index.tsx   |  14 +-
 .../SubmitFormChangesActionBar/index.tsx      |  42 +--
 .../console/src/components/Switch/index.tsx   |   4 +-
 .../src/components/TabNav/TabNavItem.tsx      |   4 +-
 .../console/src/components/TabNav/index.tsx   |   6 +-
 .../components/Table/TableEmptyWrapper.tsx    |  16 +-
 .../src/components/Table/TableError.tsx       |   4 +-
 .../src/components/Table/TableLoading.tsx     |   4 +-
 .../src/components/Table/TablePlaceholder.tsx |  11 +-
 .../console/src/components/Table/index.tsx    |   6 +-
 .../src/components/TextInput/index.tsx        |   6 +-
 .../console/src/components/TextLink/index.tsx |   4 +-
 .../console/src/components/Textarea/index.tsx |   6 +-
 .../src/components/Tip/TipBubble/index.tsx    |   6 +-
 .../src/components/Tip/ToggleTip/index.tsx    |   6 +-
 .../src/components/Tip/Tooltip/index.tsx      |   6 +-
 .../console/src/components/Toast/index.tsx    |   4 +-
 .../src/components/UnnamedTrans/index.tsx     |   4 +-
 .../UnsavedChangesAlertModal/index.tsx        |   4 +-
 .../Uploader/FileUploader/index.tsx           |   6 +-
 .../Uploader/ImageUploader/index.tsx          |   5 +-
 .../Uploader/ImageUploaderField/index.tsx     |   4 +-
 .../UserAccountInformation/index.tsx          |   6 +-
 .../src/components/UserAvatar/index.tsx       |   4 +-
 .../src/components/UserInfoCard/index.tsx     |   4 +-
 .../console/src/components/UserName/index.tsx |   4 +-
 .../components/SourceRoleItem/index.tsx       |   4 +-
 .../components/SourceRolesBox/index.tsx       |   4 +-
 .../components/TargetRoleItem/index.tsx       |   4 +-
 .../components/TargetRolesBox/index.tsx       |   4 +-
 .../components/UserRolesTransfer/index.tsx    |  16 +-
 .../VerificationCodeInput/index.tsx           |   6 +-
 .../src/containers/AppBoundary/index.tsx      |   4 +-
 .../AppContent/components/SubMenu/index.tsx   |   6 +-
 .../AppContent/components/Topbar/index.tsx    |   4 +-
 .../AppContent/components/UserInfo/index.tsx  |   4 +-
 .../components/UserInfoSkeleton/index.tsx     |  12 +-
 .../src/containers/AppContent/index.tsx       |   4 +-
 .../Sidebar/components/Contact/index.tsx      |   4 +-
 .../Sidebar/components/Item/index.tsx         |   4 +-
 .../Sidebar/components/Section/index.tsx      |   4 +-
 .../ConsoleContent/Sidebar/icons/BarGraph.tsx |  18 +-
 .../ConsoleContent/Sidebar/icons/Bolt.tsx     |  18 +-
 .../ConsoleContent/Sidebar/icons/Box.tsx      |   4 +-
 .../ConsoleContent/Sidebar/icons/Cloud.tsx    |   4 +-
 .../Sidebar/icons/Connection.tsx              |   4 +-
 .../ConsoleContent/Sidebar/icons/Contact.tsx  |   4 +-
 .../ConsoleContent/Sidebar/icons/Document.tsx |   4 +-
 .../ConsoleContent/Sidebar/icons/Gear.tsx     |   4 +-
 .../ConsoleContent/Sidebar/icons/List.tsx     |   4 +-
 .../Sidebar/icons/UserProfile.tsx             |   4 +-
 .../ConsoleContent/Sidebar/icons/Web.tsx      |   4 +-
 .../ConsoleContent/Sidebar/index.tsx          |   4 +-
 .../src/containers/ConsoleContent/index.tsx   |   4 +-
 .../containers/TenantAppContainer/index.tsx   |   4 +-
 .../AppConfirmModalProvider/index.tsx         |   4 +-
 .../src/contexts/AppEndpointsProvider.tsx     |   4 +-
 .../src/contexts/AppThemeProvider/index.tsx   |   4 +-
 .../console/src/contexts/TenantsProvider.tsx  |   4 +-
 .../src/icons/ConnectorPlatformIcon.tsx       |   4 +-
 .../mdx-components/DetailsSummary/index.tsx   |   4 +-
 .../console/src/mdx-components/Step/index.tsx |   6 +-
 .../src/mdx-components/TabItem/index.tsx      |   4 +-
 .../console/src/mdx-components/Tabs/index.tsx |   4 +-
 .../mdx-components/UriInputField/index.tsx    |   4 +-
 packages/console/src/onboarding/App.tsx       |   4 +-
 .../onboarding/components/ActionBar/index.tsx |  14 +-
 .../onboarding/components/Broadcast/index.tsx |   4 +-
 .../components/CardSelector/CardSelector.tsx  |  28 +-
 .../MultiCardSelector/CardItem.tsx            |   6 +-
 .../CardSelector/MultiCardSelector/index.tsx  |   6 +-
 .../components/DemoConnectorNotice/index.tsx  |   4 +-
 .../EarlyBirdGift/GiftModal/index.tsx         |   4 +-
 .../components/EarlyBirdGift/index.tsx        |   4 +-
 .../components/ProgressBar/index.tsx          |  22 +-
 .../components/Reservation/index.tsx          |   6 +-
 .../onboarding/components/Topbar/index.tsx    |  12 +-
 .../containers/AppContent/index.tsx           |  16 +-
 .../src/onboarding/pages/About/index.tsx      |   1 -
 .../src/onboarding/pages/Congrats/index.tsx   |   1 -
 .../components/InspireMe/index.tsx            |   4 +-
 .../components/PlatformTabs/PlatformTab.tsx   |   4 +-
 .../components/PlatformTabs/index.tsx         |  38 +--
 .../components/Preview/index.tsx              |   4 +-
 .../components/Skeleton/index.tsx             |   4 +-
 .../components/SocialSelector/index.tsx       |   4 +-
 .../pages/SignInExperience/index.tsx          |   1 -
 .../src/onboarding/pages/Welcome/index.tsx    |   1 -
 .../CreatePermissionModal/index.tsx           |   4 +-
 .../ApiResourcePermissions/index.tsx          |   4 +-
 .../ApiResourceSettings/index.tsx             |   4 +-
 .../src/pages/ApiResourceDetails/index.tsx    |   1 -
 .../components/CreateForm/index.tsx           |   4 +-
 .../console/src/pages/ApiResources/index.tsx  |   1 -
 .../components/AdvancedSettings.tsx           |   4 +-
 .../components/Settings.tsx                   |   4 +-
 .../src/pages/ApplicationDetails/index.tsx    |   1 -
 .../ApplicationsPlaceholder/index.tsx         |   4 +-
 .../components/CreateForm/index.tsx           |   4 +-
 .../components/Guide/GuideModal.tsx           |   4 +-
 .../Applications/components/Guide/index.tsx   |   4 +-
 .../components/GuideHeader/index.tsx          |   4 +-
 .../components/SdkSelector/index.tsx          |   6 +-
 .../components/StepsSkeleton/index.tsx        |  28 +-
 .../components/TypeDescription/index.tsx      |  18 +-
 .../console/src/pages/Applications/index.tsx  |   1 -
 .../components/EventIcon/index.tsx            |   4 +-
 .../src/pages/AuditLogDetails/index.tsx       |   1 -
 .../console/src/pages/AuditLogs/index.tsx     |   1 -
 packages/console/src/pages/Callback/index.tsx |   4 +-
 .../components/ConnectorContent.tsx           |   4 +-
 .../components/ConnectorTabs/index.tsx        |   4 +-
 .../components/ConnectorTypeName/index.tsx    |   4 +-
 .../DeleteConnectorConfirmModal/index.tsx     |   4 +-
 .../components/SenderTester/index.tsx         |   4 +-
 .../src/pages/ConnectorDetails/index.tsx      |   1 -
 .../components/ConfigForm/index.tsx           |   4 +-
 .../ConnectorDeleteButton/index.tsx           |   4 +-
 .../components/ConnectorForm/BasicForm.tsx    |   6 +-
 .../components/ConnectorForm/ConfigForm.tsx   |   4 +-
 .../components/ConnectorName/DemoTag.tsx      |   4 +-
 .../components/ConnectorName/index.tsx        |   4 +-
 .../components/ConnectorStatus/index.tsx      |   4 +-
 .../components/ConnectorStatusField/index.tsx |   4 +-
 .../components/ConnectorTypeColumn/index.tsx  |   4 +-
 .../CreateForm/PlatformSelector.tsx           |   4 +-
 .../components/CreateForm/index.tsx           |   4 +-
 .../Connectors/components/Guide/index.tsx     |   4 +-
 .../SignInExperienceSetupNotice/index.tsx     |   4 +-
 .../console/src/pages/Connectors/index.tsx    |   1 -
 .../src/pages/Dashboard/components/Block.tsx  |   4 +-
 .../components/ChartTooltip/index.tsx         |   4 +-
 .../Dashboard/components/Skeleton/index.tsx   |  44 +--
 .../console/src/pages/Dashboard/index.tsx     |   1 -
 .../components/GetStartedProgress/index.tsx   |   4 +-
 .../GetStarted/components/Skeleton/index.tsx  |  26 +-
 .../console/src/pages/GetStarted/index.tsx    |   1 -
 packages/console/src/pages/Main/index.tsx     |   4 +-
 packages/console/src/pages/NotFound/index.tsx |   4 +-
 .../components/BasicUserInfoSection/index.tsx |   4 +-
 .../Profile/components/CardContent/index.tsx  |   6 +-
 .../components/LinkAccountSection/index.tsx   |   4 +-
 .../components/MainFlowLikeModal/index.tsx    |  11 +-
 .../pages/Profile/components/NotSet/index.tsx |   4 +-
 .../Profile/components/Skeleton/index.tsx     |   4 +-
 .../BasicUserInfoUpdateModal/index.tsx        |   4 +-
 .../containers/ChangePasswordModal/index.tsx  |   4 +-
 .../containers/DeleteAccountModal/index.tsx   |   4 +-
 .../containers/HandleSocialCallback/index.tsx |   4 +-
 .../containers/LinkEmailModal/index.tsx       |   4 +-
 .../VerificationCodeModal/index.tsx           |   4 +-
 .../containers/VerifyPasswordModal/index.tsx  |   4 +-
 packages/console/src/pages/Profile/index.tsx  |   1 -
 .../AssignPermissionsModal/index.tsx          |   4 +-
 .../RoleDetails/RolePermissions/index.tsx     |   4 +-
 .../pages/RoleDetails/RoleSettings/index.tsx  |   4 +-
 .../components/AssignUsersModal/index.tsx     |   4 +-
 .../src/pages/RoleDetails/RoleUsers/index.tsx |   4 +-
 .../console/src/pages/RoleDetails/index.tsx   |   1 -
 .../Roles/components/AssignedUsers/index.tsx  |   5 +-
 .../Roles/components/CreateRoleForm/index.tsx |   4 +-
 .../components/CreateRoleModal/index.tsx      |   4 +-
 packages/console/src/pages/Roles/index.tsx    |   1 -
 .../components/Preview/index.tsx              |   6 +-
 .../DiffSegment.tsx                           |   4 +-
 .../SignInDiffSection.tsx                     |   4 +-
 .../SignUpDiffSection.tsx                     |   4 +-
 .../SocialTargetsDiffSection.tsx              |   4 +-
 .../SignUpAndSignInDiffSection/index.tsx      |  32 ++-
 .../SignUpAndSignInChangePreview/index.tsx    |   4 +-
 .../components/Skeleton/index.tsx             |   4 +-
 .../components/TabWrapper/index.tsx           |   4 +-
 .../components/Welcome/GuideModal.tsx         |   4 +-
 .../components/Welcome/index.tsx              |   4 +-
 .../src/pages/SignInExperience/index.tsx      |  23 +-
 .../tabs/Branding/BrandingForm.tsx            |   4 +-
 .../tabs/Branding/CustomCssForm.tsx           |   4 +-
 .../LogoAndFaviconUploader/index.tsx          |   4 +-
 .../SignInExperience/tabs/Branding/index.tsx  |  14 +-
 .../tabs/Others/AuthenticationForm.tsx        |   4 +-
 .../tabs/Others/LanguagesForm.tsx             |   4 +-
 .../tabs/Others/TermsForm.tsx                 |   4 +-
 .../LanguageEditor/AddLanguageSelector.tsx    |   4 +-
 .../LanguageEditor/LanguageDetails.tsx        |   4 +-
 .../LanguageEditor/LanguageItem.tsx           |   4 +-
 .../LanguageEditor/LanguageNav.tsx            |   4 +-
 .../ManageLanguage/LanguageEditor/index.tsx   |   8 +-
 .../ManageLanguage/ManageLanguageButton.tsx   |   4 +-
 .../SignInExperience/tabs/Others/index.tsx    |  16 +-
 .../tabs/SignUpAndSignIn/SignInForm.tsx       |   4 +-
 .../tabs/SignUpAndSignIn/SignUpForm.tsx       |   4 +-
 .../tabs/SignUpAndSignIn/SocialSignInForm.tsx |   4 +-
 .../components/ConnectorSetupWarning.tsx      |   4 +-
 .../SignInMethodEditBox/AddButton.tsx         |   4 +-
 .../SignInMethodEditBox/SignInMethodItem.tsx  |   6 +-
 .../components/SignInMethodEditBox/index.tsx  |   4 +-
 .../SocialConnectorEditBox/AddButton.tsx      |   4 +-
 .../SelectedConnectorItem.tsx                 |   6 +-
 .../SocialConnectorEditBox/index.tsx          |   4 +-
 .../tabs/SignUpAndSignIn/index.tsx            |  16 +-
 .../src/pages/UserDetails/UserLogs/index.tsx  |   4 +-
 .../components/AssignRolesModal/index.tsx     |   4 +-
 .../src/pages/UserDetails/UserRoles/index.tsx |   4 +-
 .../components/UserSocialIdentities/index.tsx |   9 +-
 .../pages/UserDetails/UserSettings/index.tsx  |   4 +-
 .../components/ResetPasswordForm/index.tsx    |   4 +-
 .../console/src/pages/UserDetails/index.tsx   |   1 -
 .../Users/components/CreateForm/index.tsx     |   4 +-
 packages/console/src/pages/Users/index.tsx    |   1 -
 packages/console/src/pages/Welcome/index.tsx  |   4 +-
 287 files changed, 1069 insertions(+), 1028 deletions(-)

diff --git a/packages/console/package.json b/packages/console/package.json
index f468e263b..5e39015e7 100644
--- a/packages/console/package.json
+++ b/packages/console/package.json
@@ -115,7 +115,16 @@
     "@mdx/components/*": "./src/mdx-components/$1"
   },
   "eslintConfig": {
-    "extends": "@silverhand/react"
+    "extends": "@silverhand/react",
+    "rules": {
+      "react/function-component-definition": [
+        "error",
+        {
+          "namedComponents": "function-declaration",
+          "unnamedComponents": "arrow-function"
+        }
+      ]
+    }
   },
   "stylelint": {
     "extends": "@silverhand/eslint-config-react/.stylelintrc"
diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx
index f8e976fa8..6760a9f6a 100644
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@@ -28,7 +28,7 @@ import setTitle from './utils/set-title';
 void initI18n();
 setTitle();
 
-const Content = () => {
+function Content() {
   const { tenants, isSettle, currentTenantId } = useContext(TenantsContext);
 
   const resources = deduplicate(
@@ -78,14 +78,14 @@ const Content = () => {
       </AppThemeProvider>
     </LogtoProvider>
   );
-};
+}
 
-const App = () => {
+function App() {
   return (
     <TenantsProvider>
       <Content />
     </TenantsProvider>
   );
-};
+}
 
 export default App;
diff --git a/packages/console/src/cloud/App.tsx b/packages/console/src/cloud/App.tsx
index be16c4c6a..b4dee66c5 100644
--- a/packages/console/src/cloud/App.tsx
+++ b/packages/console/src/cloud/App.tsx
@@ -7,7 +7,7 @@ import Main from './pages/Main';
 import SocialDemoCallback from './pages/SocialDemoCallback';
 import { CloudRoute } from './types';
 
-const App = () => {
+function App() {
   return (
     <BrowserRouter>
       <div className={styles.app}>
@@ -20,6 +20,6 @@ const App = () => {
       </div>
     </BrowserRouter>
   );
-};
+}
 
 export default App;
diff --git a/packages/console/src/cloud/pages/Callback/index.tsx b/packages/console/src/cloud/pages/Callback/index.tsx
index 9c1923062..821c9a620 100644
--- a/packages/console/src/cloud/pages/Callback/index.tsx
+++ b/packages/console/src/cloud/pages/Callback/index.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import AppLoading from '@/components/AppLoading';
 import { getUserTenantId } from '@/consts/tenants';
 
-const Callback = () => {
+function Callback() {
   const navigate = useNavigate();
   const { error } = useHandleSignInCallback(() => {
     navigate('/' + getUserTenantId(), { replace: true });
@@ -21,6 +21,6 @@ const Callback = () => {
   }
 
   return <AppLoading />;
-};
+}
 
 export default Callback;
diff --git a/packages/console/src/cloud/pages/Main/Redirect.tsx b/packages/console/src/cloud/pages/Main/Redirect.tsx
index 7d1f25f84..7d078b5ad 100644
--- a/packages/console/src/cloud/pages/Main/Redirect.tsx
+++ b/packages/console/src/cloud/pages/Main/Redirect.tsx
@@ -12,7 +12,7 @@ type Props = {
   toTenantId: string;
 };
 
-const Redirect = ({ tenants, toTenantId }: Props) => {
+function Redirect({ tenants, toTenantId }: Props) {
   const { getAccessToken, signIn } = useLogto();
   const tenant = tenants.find(({ id }) => id === toTenantId);
   const { setIsSettle } = useContext(TenantsContext);
@@ -40,6 +40,6 @@ const Redirect = ({ tenants, toTenantId }: Props) => {
   }
 
   return <AppLoading />;
-};
+}
 
 export default Redirect;
diff --git a/packages/console/src/cloud/pages/Main/Tenants.tsx b/packages/console/src/cloud/pages/Main/Tenants.tsx
index d2ce72d8a..0534dbeda 100644
--- a/packages/console/src/cloud/pages/Main/Tenants.tsx
+++ b/packages/console/src/cloud/pages/Main/Tenants.tsx
@@ -14,7 +14,7 @@ type Props = {
   onAdd: (tenant: TenantInfo) => void;
 };
 
-const Tenants = ({ data, onAdd }: Props) => {
+function Tenants({ data, onAdd }: Props) {
   const api = useCloudApi();
   const { navigate } = useContext(TenantsContext);
 
@@ -57,6 +57,6 @@ const Tenants = ({ data, onAdd }: Props) => {
   }
 
   return <AppLoading />;
-};
+}
 
 export default Tenants;
diff --git a/packages/console/src/cloud/pages/Main/index.tsx b/packages/console/src/cloud/pages/Main/index.tsx
index 47d65e765..7244550ca 100644
--- a/packages/console/src/cloud/pages/Main/index.tsx
+++ b/packages/console/src/cloud/pages/Main/index.tsx
@@ -12,7 +12,7 @@ import { TenantsContext } from '@/contexts/TenantsProvider';
 import Redirect from './Redirect';
 import Tenants from './Tenants';
 
-const Protected = () => {
+function Protected() {
   const api = useCloudApi();
   const { tenants, setTenants, currentTenantId } = useContext(TenantsContext);
 
@@ -43,9 +43,9 @@ const Protected = () => {
   }
 
   return <AppLoading />;
-};
+}
 
-const Main = () => {
+function Main() {
   const [searchParameters] = useSearchParams();
   const { isAuthenticated, isLoading, signIn } = useLogto();
   const { currentTenantId } = useContext(TenantsContext);
@@ -66,6 +66,6 @@ const Main = () => {
   }
 
   return <Protected />;
-};
+}
 
 export default Main;
diff --git a/packages/console/src/cloud/pages/SocialDemoCallback/index.tsx b/packages/console/src/cloud/pages/SocialDemoCallback/index.tsx
index d34e86814..2247e6f26 100644
--- a/packages/console/src/cloud/pages/SocialDemoCallback/index.tsx
+++ b/packages/console/src/cloud/pages/SocialDemoCallback/index.tsx
@@ -8,7 +8,7 @@ import useTheme from '@/hooks/use-theme';
 
 import * as styles from './index.module.scss';
 
-const SocialDemoCallback = () => {
+function SocialDemoCallback() {
   const theme = useTheme();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -21,6 +21,6 @@ const SocialDemoCallback = () => {
       </Card>
     </div>
   );
-};
+}
 
 export default SocialDemoCallback;
diff --git a/packages/console/src/components/ActionMenu/index.tsx b/packages/console/src/components/ActionMenu/index.tsx
index 93903b262..a800e18df 100644
--- a/packages/console/src/components/ActionMenu/index.tsx
+++ b/packages/console/src/components/ActionMenu/index.tsx
@@ -20,14 +20,14 @@ type Props = {
   isDropdownFullWidth?: boolean;
 };
 
-const ActionMenu = ({
+function ActionMenu({
   children,
   buttonProps,
   title,
   dropdownHorizontalAlign,
   dropdownClassName,
   isDropdownFullWidth = false,
-}: Props) => {
+}: Props) {
   const [isOpen, setIsOpen] = useState(false);
   const anchorReference = useRef<HTMLDivElement>(null);
 
@@ -56,6 +56,6 @@ const ActionMenu = ({
       </Dropdown>
     </div>
   );
-};
+}
 
 export default ActionMenu;
diff --git a/packages/console/src/components/Alert/index.tsx b/packages/console/src/components/Alert/index.tsx
index f693e3ace..63de97e83 100644
--- a/packages/console/src/components/Alert/index.tsx
+++ b/packages/console/src/components/Alert/index.tsx
@@ -19,7 +19,7 @@ type Props = {
   className?: string;
 };
 
-const Alert = ({
+function Alert({
   children,
   action,
   href,
@@ -27,7 +27,7 @@ const Alert = ({
   severity = 'info',
   variant = 'plain',
   className,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -44,6 +44,6 @@ const Alert = ({
       )}
     </div>
   );
-};
+}
 
 export default Alert;
diff --git a/packages/console/src/components/AppError/index.tsx b/packages/console/src/components/AppError/index.tsx
index 953aa5d9e..6eae19e68 100644
--- a/packages/console/src/components/AppError/index.tsx
+++ b/packages/console/src/components/AppError/index.tsx
@@ -19,7 +19,7 @@ type Props = {
   children?: React.ReactNode;
 };
 
-const AppError = ({ title, errorCode, errorMessage, callStack, children }: Props) => {
+function AppError({ title, errorCode, errorMessage, callStack, children }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   const theme = useTheme();
@@ -55,6 +55,6 @@ const AppError = ({ title, errorCode, errorMessage, callStack, children }: Props
       {children}
     </div>
   );
-};
+}
 
 export default AppError;
diff --git a/packages/console/src/components/AppLoading/index.tsx b/packages/console/src/components/AppLoading/index.tsx
index 091a833fd..ca16ed398 100644
--- a/packages/console/src/components/AppLoading/index.tsx
+++ b/packages/console/src/components/AppLoading/index.tsx
@@ -7,7 +7,7 @@ import useTheme from '@/hooks/use-theme';
 
 import * as styles from './index.module.scss';
 
-const AppLoading = () => {
+function AppLoading() {
   const theme = useTheme();
 
   return (
@@ -16,6 +16,6 @@ const AppLoading = () => {
       <Spinner />
     </div>
   );
-};
+}
 
 export default AppLoading;
diff --git a/packages/console/src/components/ApplicationIcon/index.tsx b/packages/console/src/components/ApplicationIcon/index.tsx
index 87efdb5b1..35db16d31 100644
--- a/packages/console/src/components/ApplicationIcon/index.tsx
+++ b/packages/console/src/components/ApplicationIcon/index.tsx
@@ -9,12 +9,12 @@ type Props = {
   className?: string;
 };
 
-const ApplicationIcon = ({ type, className }: Props) => {
+function ApplicationIcon({ type, className }: Props) {
   const theme = useTheme();
   const isLightMode = theme === Theme.Light;
   const Icon = isLightMode ? lightModeApplicationIconMap[type] : darkModeApplicationIconMap[type];
 
   return <Icon className={className} />;
-};
+}
 
 export default ApplicationIcon;
diff --git a/packages/console/src/components/ApplicationName/index.tsx b/packages/console/src/components/ApplicationName/index.tsx
index 3c65dd818..bd3ba10eb 100644
--- a/packages/console/src/components/ApplicationName/index.tsx
+++ b/packages/console/src/components/ApplicationName/index.tsx
@@ -11,7 +11,7 @@ type Props = {
   isLink?: boolean;
 };
 
-const ApplicationName = ({ applicationId, isLink = false }: Props) => {
+function ApplicationName({ applicationId, isLink = false }: Props) {
   const isAdminConsole = applicationId === adminConsoleApplicationId;
 
   const { data } = useSWR<Application>(!isAdminConsole && `api/applications/${applicationId}`);
@@ -28,6 +28,6 @@ const ApplicationName = ({ applicationId, isLink = false }: Props) => {
   }
 
   return <span>{name}</span>;
-};
+}
 
 export default ApplicationName;
diff --git a/packages/console/src/components/AuditLogTable/components/ApplicationSelector/index.tsx b/packages/console/src/components/AuditLogTable/components/ApplicationSelector/index.tsx
index f87cc0ce1..224a764fa 100644
--- a/packages/console/src/components/AuditLogTable/components/ApplicationSelector/index.tsx
+++ b/packages/console/src/components/AuditLogTable/components/ApplicationSelector/index.tsx
@@ -10,7 +10,7 @@ type Props = {
   onChange: (value?: string) => void;
 };
 
-const ApplicationSelector = ({ value, onChange }: Props) => {
+function ApplicationSelector({ value, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data } = useSWR<Application[]>('api/applications');
   const options =
@@ -28,6 +28,6 @@ const ApplicationSelector = ({ value, onChange }: Props) => {
       onChange={onChange}
     />
   );
-};
+}
 
 export default ApplicationSelector;
diff --git a/packages/console/src/components/AuditLogTable/components/EventName/index.tsx b/packages/console/src/components/AuditLogTable/components/EventName/index.tsx
index 5b38bd335..730194141 100644
--- a/packages/console/src/components/AuditLogTable/components/EventName/index.tsx
+++ b/packages/console/src/components/AuditLogTable/components/EventName/index.tsx
@@ -13,7 +13,7 @@ type Props = {
   to?: string;
 };
 
-const EventName = ({ eventKey, isSuccess, to }: Props) => {
+function EventName({ eventKey, isSuccess, to }: Props) {
   const title = logEventTitle[eventKey] ?? eventKey;
 
   return (
@@ -35,6 +35,6 @@ const EventName = ({ eventKey, isSuccess, to }: Props) => {
       {!to && <div className={styles.title}>{title}</div>}
     </div>
   );
-};
+}
 
 export default EventName;
diff --git a/packages/console/src/components/AuditLogTable/components/EventSelector/index.tsx b/packages/console/src/components/AuditLogTable/components/EventSelector/index.tsx
index f971db5a6..aa7064f5b 100644
--- a/packages/console/src/components/AuditLogTable/components/EventSelector/index.tsx
+++ b/packages/console/src/components/AuditLogTable/components/EventSelector/index.tsx
@@ -8,7 +8,7 @@ type Props = {
   onChange: (value?: string) => void;
 };
 
-const EventSelector = ({ value, onChange }: Props) => {
+function EventSelector({ value, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const options = Object.entries(logEventTitle).map(([value, title]) => ({
     value,
@@ -24,6 +24,6 @@ const EventSelector = ({ value, onChange }: Props) => {
       onChange={onChange}
     />
   );
-};
+}
 
 export default EventSelector;
diff --git a/packages/console/src/components/AuditLogTable/index.tsx b/packages/console/src/components/AuditLogTable/index.tsx
index aa2a849b2..ce06e1db9 100644
--- a/packages/console/src/components/AuditLogTable/index.tsx
+++ b/packages/console/src/components/AuditLogTable/index.tsx
@@ -25,7 +25,7 @@ type Props = {
   className?: string;
 };
 
-const AuditLogTable = ({ userId, className }: Props) => {
+function AuditLogTable({ userId, className }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { pathname } = useLocation();
   const pageSize = defaultPageSize;
@@ -132,6 +132,6 @@ const AuditLogTable = ({ userId, className }: Props) => {
       onRetry={async () => mutate(undefined, true)}
     />
   );
-};
+}
 
 export default AuditLogTable;
diff --git a/packages/console/src/components/Button/index.tsx b/packages/console/src/components/Button/index.tsx
index c978d8406..0c917708c 100644
--- a/packages/console/src/components/Button/index.tsx
+++ b/packages/console/src/components/Button/index.tsx
@@ -39,7 +39,7 @@ type IconButtonProps = BaseProps & {
 
 export type Props = TitleButtonProps | IconButtonProps;
 
-const Button = ({
+function Button({
   htmlType = 'button',
   type = 'default',
   size = 'medium',
@@ -51,7 +51,7 @@ const Button = ({
   onClick,
   trailingIcon,
   ...rest
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [showSpinner, setShowSpinner] = useState(false);
   const timerRef = useRef<number>();
@@ -96,6 +96,6 @@ const Button = ({
       {trailingIcon && <span className={styles.trailingIcon}>{trailingIcon}</span>}
     </button>
   );
-};
+}
 
 export default Button;
diff --git a/packages/console/src/components/Card/index.tsx b/packages/console/src/components/Card/index.tsx
index e3e0a62ed..4fa9d6377 100644
--- a/packages/console/src/components/Card/index.tsx
+++ b/packages/console/src/components/Card/index.tsx
@@ -9,7 +9,7 @@ type Props = {
   className?: string;
 };
 
-const Card = (props: Props, reference?: Ref<HTMLDivElement>) => {
+function Card(props: Props, reference?: Ref<HTMLDivElement>) {
   const { children, className } = props;
 
   return (
@@ -17,6 +17,6 @@ const Card = (props: Props, reference?: Ref<HTMLDivElement>) => {
       {children}
     </div>
   );
-};
+}
 
 export default forwardRef<HTMLDivElement, Props>(Card);
diff --git a/packages/console/src/components/CardTitle/index.tsx b/packages/console/src/components/CardTitle/index.tsx
index 31edbca17..e196f9788 100644
--- a/packages/console/src/components/CardTitle/index.tsx
+++ b/packages/console/src/components/CardTitle/index.tsx
@@ -19,14 +19,14 @@ export type Props = {
 /**
  * Always use this component to render CardTitle, with built-in i18n support.
  */
-const CardTitle = ({
+function CardTitle({
   title,
   subtitle,
   size = 'large',
   isWordWrapEnabled = false,
   learnMoreLink,
   className,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -46,6 +46,6 @@ const CardTitle = ({
       )}
     </div>
   );
-};
+}
 
 export default CardTitle;
diff --git a/packages/console/src/components/Checkbox/index.tsx b/packages/console/src/components/Checkbox/index.tsx
index 9bc46846e..f0317e8e2 100644
--- a/packages/console/src/components/Checkbox/index.tsx
+++ b/packages/console/src/components/Checkbox/index.tsx
@@ -19,7 +19,7 @@ type Props = {
   tooltip?: ReactNode;
 };
 
-const Checkbox = ({
+function Checkbox({
   checked,
   disabled = false,
   indeterminate,
@@ -27,7 +27,7 @@ const Checkbox = ({
   label,
   className,
   tooltip,
-}: Props) => {
+}: Props) {
   const [isIndeterminate, setIsIndeterminate] = useState(indeterminate);
 
   useLayoutEffect(() => {
@@ -106,6 +106,6 @@ const Checkbox = ({
       </div>
     </div>
   );
-};
+}
 
 export default Checkbox;
diff --git a/packages/console/src/components/CodeEditor/index.tsx b/packages/console/src/components/CodeEditor/index.tsx
index 2e2b53f74..1671dcdbb 100644
--- a/packages/console/src/components/CodeEditor/index.tsx
+++ b/packages/console/src/components/CodeEditor/index.tsx
@@ -21,7 +21,7 @@ type Props = {
   placeholder?: string;
 };
 
-const CodeEditor = ({
+function CodeEditor({
   className,
   language,
   isReadonly = false,
@@ -31,7 +31,7 @@ const CodeEditor = ({
   hasError,
   errorMessage,
   placeholder,
-}: Props) => {
+}: Props) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const editorRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -142,6 +142,6 @@ const CodeEditor = ({
       {hasError && <div className={styles.errorMessage}>{finalErrorMessage}</div>}
     </>
   );
-};
+}
 
 export default CodeEditor;
diff --git a/packages/console/src/components/ColorPicker/index.tsx b/packages/console/src/components/ColorPicker/index.tsx
index 18903582b..c17e0a263 100644
--- a/packages/console/src/components/ColorPicker/index.tsx
+++ b/packages/console/src/components/ColorPicker/index.tsx
@@ -9,7 +9,7 @@ type Props = {
   onChange?: (value: string) => void;
 };
 
-const ColorPicker = ({ onChange, value = '#000000' }: Props) => {
+function ColorPicker({ onChange, value = '#000000' }: Props) {
   const [id, setId] = useState(nanoid());
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -22,5 +22,5 @@ const ColorPicker = ({ onChange, value = '#000000' }: Props) => {
       <label htmlFor={id}>{value.toUpperCase()}</label>
     </div>
   );
-};
+}
 export default ColorPicker;
diff --git a/packages/console/src/components/ConfirmModal/index.tsx b/packages/console/src/components/ConfirmModal/index.tsx
index e60d00234..09bfc5f8b 100644
--- a/packages/console/src/components/ConfirmModal/index.tsx
+++ b/packages/console/src/components/ConfirmModal/index.tsx
@@ -24,7 +24,7 @@ export type ConfirmModalProps = {
   onConfirm?: () => void;
 };
 
-const ConfirmModal = ({
+function ConfirmModal({
   children,
   className,
   title = 'general.reminder',
@@ -36,7 +36,7 @@ const ConfirmModal = ({
   isLoading = false,
   onCancel,
   onConfirm,
-}: ConfirmModalProps) => {
+}: ConfirmModalProps) {
   return (
     <ReactModal
       shouldCloseOnEsc
@@ -68,6 +68,6 @@ const ConfirmModal = ({
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default ConfirmModal;
diff --git a/packages/console/src/components/ConnectorLogo/index.tsx b/packages/console/src/components/ConnectorLogo/index.tsx
index ebb27a457..06ca89b32 100644
--- a/packages/console/src/components/ConnectorLogo/index.tsx
+++ b/packages/console/src/components/ConnectorLogo/index.tsx
@@ -13,7 +13,7 @@ type Props = {
   size?: 'small' | 'medium' | 'large';
 };
 
-const ConnectorLogo = ({ className, data, size = 'medium' }: Props) => {
+function ConnectorLogo({ className, data, size = 'medium' }: Props) {
   const theme = useTheme();
 
   return (
@@ -24,6 +24,6 @@ const ConnectorLogo = ({ className, data, size = 'medium' }: Props) => {
       src={theme === Theme.Dark && data.logoDark ? data.logoDark : data.logo}
     />
   );
-};
+}
 
 export default ConnectorLogo;
diff --git a/packages/console/src/components/CopyToClipboard/index.tsx b/packages/console/src/components/CopyToClipboard/index.tsx
index 70ebf465d..35fd1fdc2 100644
--- a/packages/console/src/components/CopyToClipboard/index.tsx
+++ b/packages/console/src/components/CopyToClipboard/index.tsx
@@ -23,13 +23,13 @@ type Props = {
 
 type CopyState = TFuncKey<'translation', 'admin_console.general'>;
 
-const CopyToClipboard = ({
+function CopyToClipboard({
   value,
   className,
   hasVisibilityToggle,
   variant = 'contained',
   size = 'default',
-}: Props) => {
+}: Props) {
   const copyIconReference = useRef<HTMLButtonElement>(null);
   const [copyState, setCopyState] = useState<CopyState>('copy');
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.general' });
@@ -101,6 +101,6 @@ const CopyToClipboard = ({
       </div>
     </div>
   );
-};
+}
 
 export default CopyToClipboard;
diff --git a/packages/console/src/components/DangerousRaw/index.tsx b/packages/console/src/components/DangerousRaw/index.tsx
index 2e1f4f5cc..7015a7e7e 100644
--- a/packages/console/src/components/DangerousRaw/index.tsx
+++ b/packages/console/src/components/DangerousRaw/index.tsx
@@ -4,6 +4,8 @@ type Props = {
   children: ReactNode;
 };
 
-const DangerousRaw = ({ children }: Props) => <span>{children}</span>;
+function DangerousRaw({ children }: Props) {
+  return <span>{children}</span>;
+}
 
 export default DangerousRaw;
diff --git a/packages/console/src/components/DateTime/index.tsx b/packages/console/src/components/DateTime/index.tsx
index 4c20a2473..7fc43947e 100644
--- a/packages/console/src/components/DateTime/index.tsx
+++ b/packages/console/src/components/DateTime/index.tsx
@@ -5,7 +5,7 @@ type Props = {
   children: Nullable<string | number>;
 };
 
-const DateTime = ({ children }: Props) => {
+function DateTime({ children }: Props) {
   const date = children && new Date(children);
 
   if (!date || !isValid(date)) {
@@ -13,6 +13,6 @@ const DateTime = ({ children }: Props) => {
   }
 
   return <span>{date.toLocaleDateString()}</span>;
-};
+}
 
 export default DateTime;
diff --git a/packages/console/src/components/DeleteConfirmModal/index.tsx b/packages/console/src/components/DeleteConfirmModal/index.tsx
index b2e75f86b..bccabafa7 100644
--- a/packages/console/src/components/DeleteConfirmModal/index.tsx
+++ b/packages/console/src/components/DeleteConfirmModal/index.tsx
@@ -15,7 +15,7 @@ type Props = {
   onConfirm: () => void;
 };
 
-const DeleteConfirmModal = ({
+function DeleteConfirmModal({
   isOpen,
   isLoading = false,
   expectedInput,
@@ -24,7 +24,7 @@ const DeleteConfirmModal = ({
   className,
   onCancel,
   onConfirm,
-}: Props) => {
+}: Props) {
   const [input, setInput] = useState('');
   const isConfirmBlocked = Boolean(expectedInput) && input !== expectedInput;
 
@@ -52,6 +52,6 @@ const DeleteConfirmModal = ({
       )}
     </ConfirmModal>
   );
-};
+}
 
 export default DeleteConfirmModal;
diff --git a/packages/console/src/components/DetailsForm/index.tsx b/packages/console/src/components/DetailsForm/index.tsx
index 20f945685..1f9e3a2a2 100644
--- a/packages/console/src/components/DetailsForm/index.tsx
+++ b/packages/console/src/components/DetailsForm/index.tsx
@@ -13,14 +13,14 @@ type Props = {
   children: ReactNode;
 };
 
-const DetailsForm = ({
+function DetailsForm({
   autoComplete,
   isDirty,
   isSubmitting,
   onSubmit,
   onDiscard,
   children,
-}: Props) => {
+}: Props) {
   return (
     <form
       className={classNames(styles.container, isDirty && styles.withSubmitActionBar)}
@@ -35,6 +35,6 @@ const DetailsForm = ({
       />
     </form>
   );
-};
+}
 
 export default DetailsForm;
diff --git a/packages/console/src/components/DetailsSkeleton/index.tsx b/packages/console/src/components/DetailsSkeleton/index.tsx
index 0d620322a..2e9b38dba 100644
--- a/packages/console/src/components/DetailsSkeleton/index.tsx
+++ b/packages/console/src/components/DetailsSkeleton/index.tsx
@@ -6,36 +6,38 @@ import Spacer from '@/components/Spacer';
 
 import * as styles from './index.module.scss';
 
-const DetailsSkeleton = () => (
-  <div className={styles.container}>
-    <div className={styles.header}>
-      <div className={styles.icon} />
-      <div className={styles.wrapper}>
-        <div className={styles.title} />
-        <div className={styles.tags} />
+function DetailsSkeleton() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.icon} />
+        <div className={styles.wrapper}>
+          <div className={styles.title} />
+          <div className={styles.tags} />
+        </div>
+        <Spacer />
+        <div className={styles.button} />
       </div>
-      <Spacer />
-      <div className={styles.button} />
-    </div>
-    <div className={styles.tabBar} />
-    <Card className={classNames(formCardStyles.container, styles.content)}>
-      <div className={classNames(formCardStyles.introduction, styles.introduction)}>
-        <div className={styles.title} />
-        <div className={styles.description}>
-          {Array.from({ length: 2 }).map((_, index) => (
+      <div className={styles.tabBar} />
+      <Card className={classNames(formCardStyles.container, styles.content)}>
+        <div className={classNames(formCardStyles.introduction, styles.introduction)}>
+          <div className={styles.title} />
+          <div className={styles.description}>
+            {Array.from({ length: 2 }).map((_, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <div key={index} className={styles.text} />
+            ))}
+          </div>
+        </div>
+        <div className={classNames(formCardStyles.form, styles.form)}>
+          {Array.from({ length: 4 }).map((_, index) => (
             // eslint-disable-next-line react/no-array-index-key
-            <div key={index} className={styles.text} />
+            <div key={index} className={styles.field} />
           ))}
         </div>
-      </div>
-      <div className={classNames(formCardStyles.form, styles.form)}>
-        {Array.from({ length: 4 }).map((_, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <div key={index} className={styles.field} />
-        ))}
-      </div>
-    </Card>
-  </div>
-);
+      </Card>
+    </div>
+  );
+}
 
 export default DetailsSkeleton;
diff --git a/packages/console/src/components/Divider/index.tsx b/packages/console/src/components/Divider/index.tsx
index d04ec716a..3bcd6357d 100644
--- a/packages/console/src/components/Divider/index.tsx
+++ b/packages/console/src/components/Divider/index.tsx
@@ -6,6 +6,8 @@ type Props = {
   className?: string;
 };
 
-const Divider = ({ className }: Props) => <div className={classNames(styles.divider, className)} />;
+function Divider({ className }: Props) {
+  return <div className={classNames(styles.divider, className)} />;
+}
 
 export default Divider;
diff --git a/packages/console/src/components/DragDrop/DragDropProvider.tsx b/packages/console/src/components/DragDrop/DragDropProvider.tsx
index dca0601d6..759c6c94d 100644
--- a/packages/console/src/components/DragDrop/DragDropProvider.tsx
+++ b/packages/console/src/components/DragDrop/DragDropProvider.tsx
@@ -19,7 +19,7 @@ export const DragDropContext = createContext<DragDropContextProps>({
   isDragging: false,
 });
 
-const DragDropProvider = ({ children }: Props) => {
+function DragDropProvider({ children }: Props) {
   const [isDragging, setIsDragging] = useState(false);
 
   const memorizedContext = useMemo(() => ({ isDragging, setIsDragging }), [isDragging]);
@@ -31,6 +31,6 @@ const DragDropProvider = ({ children }: Props) => {
       </DndProvider>
     </DragDropContext.Provider>
   );
-};
+}
 
 export default DragDropProvider;
diff --git a/packages/console/src/components/DragDrop/DraggableItem.tsx b/packages/console/src/components/DragDrop/DraggableItem.tsx
index 7795e91dc..0d6834d59 100644
--- a/packages/console/src/components/DragDrop/DraggableItem.tsx
+++ b/packages/console/src/components/DragDrop/DraggableItem.tsx
@@ -21,14 +21,14 @@ type DragItemProps = {
   type: string;
 };
 
-const DraggableItem = ({
+function DraggableItem({
   id,
   children,
   sortIndex,
   moveItem,
   dragType = 'DraggableItem',
   className,
-}: Props) => {
+}: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const { setIsDragging } = useContext(DragDropContext);
   const [{ handlerId }, drop] = useDrop<DragItemProps, void, { handlerId: Nullable<Identifier> }>({
@@ -110,6 +110,6 @@ const DraggableItem = ({
       {children}
     </div>
   );
-};
+}
 
 export default DraggableItem;
diff --git a/packages/console/src/components/Drawer/index.tsx b/packages/console/src/components/Drawer/index.tsx
index 61f0dbc19..29e6a8b17 100644
--- a/packages/console/src/components/Drawer/index.tsx
+++ b/packages/console/src/components/Drawer/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   onClose?: () => void;
 };
 
-const Drawer = ({ title, subtitle, isOpen, children, onClose }: Props) => {
+function Drawer({ title, subtitle, isOpen, children, onClose }: Props) {
   return (
     <ReactModal
       shouldCloseOnOverlayClick
@@ -43,6 +43,6 @@ const Drawer = ({ title, subtitle, isOpen, children, onClose }: Props) => {
       </div>
     </ReactModal>
   );
-};
+}
 
 export default Drawer;
diff --git a/packages/console/src/components/Dropdown/DropdownItem.tsx b/packages/console/src/components/Dropdown/DropdownItem.tsx
index 2b5972839..b8070b076 100644
--- a/packages/console/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/console/src/components/Dropdown/DropdownItem.tsx
@@ -14,24 +14,26 @@ type Props = {
   type?: 'default' | 'danger';
 };
 
-const DropdownItem = ({
+function DropdownItem({
   onClick,
   className,
   children,
   icon,
   iconClassName,
   type = 'default',
-}: Props) => (
-  <div
-    className={classNames(styles.item, styles[type], className)}
-    role="menuitem"
-    tabIndex={0}
-    onKeyDown={onKeyDownHandler(onClick)}
-    onClick={onClick}
-  >
-    {icon && <span className={classNames(styles.icon, iconClassName)}>{icon}</span>}
-    {children}
-  </div>
-);
+}: Props) {
+  return (
+    <div
+      className={classNames(styles.item, styles[type], className)}
+      role="menuitem"
+      tabIndex={0}
+      onKeyDown={onKeyDownHandler(onClick)}
+      onClick={onClick}
+    >
+      {icon && <span className={classNames(styles.icon, iconClassName)}>{icon}</span>}
+      {children}
+    </div>
+  );
+}
 
 export default DropdownItem;
diff --git a/packages/console/src/components/Dropdown/index.tsx b/packages/console/src/components/Dropdown/index.tsx
index 3206b8330..c86a78b00 100644
--- a/packages/console/src/components/Dropdown/index.tsx
+++ b/packages/console/src/components/Dropdown/index.tsx
@@ -31,14 +31,14 @@ type Props = {
   hasOverflowContent?: boolean;
 };
 
-const Div = ({
+function Div({
   children,
   ...rest
-}: PropsWithChildren<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>) => (
-  <div {...rest}>{children}</div>
-);
+}: PropsWithChildren<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>) {
+  return <div {...rest}>{children}</div>;
+}
 
-const Dropdown = ({
+function Dropdown({
   children,
   title,
   isOpen,
@@ -49,7 +49,7 @@ const Dropdown = ({
   titleClassName,
   horizontalAlign = 'end',
   hasOverflowContent,
-}: Props) => {
+}: Props) {
   const overlayRef = useRef<HTMLDivElement>(null);
 
   const { position, positionState, mutate } = usePosition({
@@ -95,6 +95,6 @@ const Dropdown = ({
       </div>
     </ReactModal>
   );
-};
+}
 
 export default Dropdown;
diff --git a/packages/console/src/components/EmptyDataPlaceholder/index.tsx b/packages/console/src/components/EmptyDataPlaceholder/index.tsx
index 4b24142d6..27655c70f 100644
--- a/packages/console/src/components/EmptyDataPlaceholder/index.tsx
+++ b/packages/console/src/components/EmptyDataPlaceholder/index.tsx
@@ -13,7 +13,7 @@ export type Props = {
   size?: 'large' | 'medium' | 'small';
 };
 
-const EmptyDataPlaceholder = ({ title, size = 'medium' }: Props) => {
+function EmptyDataPlaceholder({ title, size = 'medium' }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
   const EmptyImage = theme === Theme.Light ? Empty : EmptyDark;
@@ -24,6 +24,6 @@ const EmptyDataPlaceholder = ({ title, size = 'medium' }: Props) => {
       <div className={styles.title}>{title ?? t('errors.empty')}</div>
     </div>
   );
-};
+}
 
 export default EmptyDataPlaceholder;
diff --git a/packages/console/src/components/FormCard/index.tsx b/packages/console/src/components/FormCard/index.tsx
index c3a72f24a..28c8f346e 100644
--- a/packages/console/src/components/FormCard/index.tsx
+++ b/packages/console/src/components/FormCard/index.tsx
@@ -13,7 +13,7 @@ type Props = {
   children: ReactNode;
 };
 
-const FormCard = ({ title, description, learnMoreLink, children }: Props) => {
+function FormCard({ title, description, learnMoreLink, children }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -37,6 +37,6 @@ const FormCard = ({ title, description, learnMoreLink, children }: Props) => {
       <div className={styles.form}>{children}</div>
     </Card>
   );
-};
+}
 
 export default FormCard;
diff --git a/packages/console/src/components/FormField/index.tsx b/packages/console/src/components/FormField/index.tsx
index c52638de0..3b8963bd6 100644
--- a/packages/console/src/components/FormField/index.tsx
+++ b/packages/console/src/components/FormField/index.tsx
@@ -22,7 +22,7 @@ export type Props = {
   tip?: ToggleTipProps['content'];
 };
 
-const FormField = ({
+function FormField({
   title,
   children,
   isRequired,
@@ -30,7 +30,7 @@ const FormField = ({
   className,
   tip,
   headlineClassName,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -55,6 +55,6 @@ const FormField = ({
       {children}
     </div>
   );
-};
+}
 
 export default FormField;
diff --git a/packages/console/src/components/IconButton/index.tsx b/packages/console/src/components/IconButton/index.tsx
index 5a095ce8a..477c3bba5 100644
--- a/packages/console/src/components/IconButton/index.tsx
+++ b/packages/console/src/components/IconButton/index.tsx
@@ -9,10 +9,10 @@ export type Props = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'> & {
   iconClassName?: string;
 };
 
-const IconButton = (
+function IconButton(
   { size = 'medium', children, className, iconClassName, ...rest }: Props,
   reference: ForwardedRef<HTMLButtonElement>
-) => {
+) {
   const tipRef = useRef<HTMLDivElement>(null);
 
   return (
@@ -27,6 +27,6 @@ const IconButton = (
       </div>
     </button>
   );
-};
+}
 
 export default forwardRef(IconButton);
diff --git a/packages/console/src/components/ImageWithErrorFallback/index.tsx b/packages/console/src/components/ImageWithErrorFallback/index.tsx
index 3b09c3c9f..cf1fa1652 100644
--- a/packages/console/src/components/ImageWithErrorFallback/index.tsx
+++ b/packages/console/src/components/ImageWithErrorFallback/index.tsx
@@ -11,14 +11,14 @@ type Props = {
   fallbackElement?: ReactElement;
 } & ImgHTMLAttributes<HTMLImageElement>;
 
-const ImageWithErrorFallback = ({
+function ImageWithErrorFallback({
   src,
   alt,
   className,
   containerClassName,
   fallbackElement,
   ...props
-}: Props) => {
+}: Props) {
   const [hasError, setHasError] = useState(false);
   const theme = useTheme();
   const DefaultFallback = theme === Theme.Light ? FallbackImageLight : FallbackImageDark;
@@ -40,6 +40,6 @@ const ImageWithErrorFallback = ({
       <img className={className} src={src} alt={alt} onError={errorHandler} {...props} />
     </div>
   );
-};
+}
 
 export default ImageWithErrorFallback;
diff --git a/packages/console/src/components/Index/index.tsx b/packages/console/src/components/Index/index.tsx
index 35554eaf4..98c695abd 100644
--- a/packages/console/src/components/Index/index.tsx
+++ b/packages/console/src/components/Index/index.tsx
@@ -11,17 +11,19 @@ type Props = {
   isComplete?: boolean;
 };
 
-const Index = ({ className, index, isActive, isComplete }: Props) => (
-  <div
-    className={classNames(
-      styles.container,
-      className,
-      isActive && styles.active,
-      isComplete && styles.completed
-    )}
-  >
-    {isComplete ? <Tick /> : index}
-  </div>
-);
+function Index({ className, index, isActive, isComplete }: Props) {
+  return (
+    <div
+      className={classNames(
+        styles.container,
+        className,
+        isActive && styles.active,
+        isComplete && styles.completed
+      )}
+    >
+      {isComplete ? <Tick /> : index}
+    </div>
+  );
+}
 
 export default Index;
diff --git a/packages/console/src/components/ItemPreview/index.tsx b/packages/console/src/components/ItemPreview/index.tsx
index e918f95cc..c35616c8a 100644
--- a/packages/console/src/components/ItemPreview/index.tsx
+++ b/packages/console/src/components/ItemPreview/index.tsx
@@ -13,7 +13,7 @@ type Props = {
   size?: 'default' | 'compact';
 };
 
-const ItemPreview = ({ title, subtitle, icon, to, size = 'default' }: Props) => {
+function ItemPreview({ title, subtitle, icon, to, size = 'default' }: Props) {
   return (
     <div className={classNames(styles.item, styles[size])}>
       {icon}
@@ -34,6 +34,6 @@ const ItemPreview = ({ title, subtitle, icon, to, size = 'default' }: Props) =>
       </div>
     </div>
   );
-};
+}
 
 export default ItemPreview;
diff --git a/packages/console/src/components/LivePreviewButton/index.tsx b/packages/console/src/components/LivePreviewButton/index.tsx
index d5bbd19a0..644cf8172 100644
--- a/packages/console/src/components/LivePreviewButton/index.tsx
+++ b/packages/console/src/components/LivePreviewButton/index.tsx
@@ -18,7 +18,7 @@ type Props = {
   isDisabled: boolean;
 };
 
-const LivePreviewButton = ({ size, type, isDisabled }: Props) => {
+function LivePreviewButton({ size, type, isDisabled }: Props) {
   const { configs, updateConfigs } = useConfigs();
   const { userEndpoint } = useContext(AppEndpointsContext);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -48,6 +48,6 @@ const LivePreviewButton = ({ size, type, isDisabled }: Props) => {
       />
     </Tooltip>
   );
-};
+}
 
 export default LivePreviewButton;
diff --git a/packages/console/src/components/Markdown/components/GithubRawImage/index.tsx b/packages/console/src/components/Markdown/components/GithubRawImage/index.tsx
index 0b2605b9a..08774860b 100644
--- a/packages/console/src/components/Markdown/components/GithubRawImage/index.tsx
+++ b/packages/console/src/components/Markdown/components/GithubRawImage/index.tsx
@@ -3,7 +3,7 @@ import { useRef, useState } from 'react';
 
 const githubRawUrlPrefix = 'https://raw.githubusercontent.com/logto-io/logto/master';
 
-const GithubRawImage = ({ src, alt }: HTMLProps<HTMLImageElement>) => {
+function GithubRawImage({ src, alt }: HTMLProps<HTMLImageElement>) {
   const imgRef = useRef<HTMLImageElement>(null);
   const [width, setWidth] = useState(0);
 
@@ -30,6 +30,6 @@ const GithubRawImage = ({ src, alt }: HTMLProps<HTMLImageElement>) => {
       onLoad={onLoad}
     />
   );
-};
+}
 
 export default GithubRawImage;
diff --git a/packages/console/src/components/Markdown/index.tsx b/packages/console/src/components/Markdown/index.tsx
index b96ac1f66..64d3be613 100644
--- a/packages/console/src/components/Markdown/index.tsx
+++ b/packages/console/src/components/Markdown/index.tsx
@@ -14,7 +14,7 @@ type Props = {
   children: string;
 };
 
-const Markdown = ({ className, children }: Props) => {
+function Markdown({ className, children }: Props) {
   const tocIdSet = useRef<Set<string>>(new Set());
 
   const generateTocId = (text: string): Optional<string> => {
@@ -78,6 +78,6 @@ const Markdown = ({ className, children }: Props) => {
       {children}
     </ReactMarkdown>
   );
-};
+}
 
 export default memo(Markdown);
diff --git a/packages/console/src/components/ModalLayout/index.tsx b/packages/console/src/components/ModalLayout/index.tsx
index 90f9c15db..84d3cc265 100644
--- a/packages/console/src/components/ModalLayout/index.tsx
+++ b/packages/console/src/components/ModalLayout/index.tsx
@@ -17,14 +17,14 @@ type Props = {
   size?: 'medium' | 'large' | 'xlarge';
 } & Pick<CardTitleProps, 'learnMoreLink' | 'title' | 'subtitle' | 'isWordWrapEnabled'>;
 
-const ModalLayout = ({
+function ModalLayout({
   children,
   footer,
   onClose,
   className,
   size = 'medium',
   ...cardTitleProps
-}: Props) => {
+}: Props) {
   return (
     <Card className={classNames(styles.container, styles[size])}>
       <div className={styles.header}>
@@ -43,6 +43,6 @@ const ModalLayout = ({
       {footer && <div className={styles.footer}>{footer}</div>}
     </Card>
   );
-};
+}
 
 export default ModalLayout;
diff --git a/packages/console/src/components/MultiTextInput/index.tsx b/packages/console/src/components/MultiTextInput/index.tsx
index dda2ec39b..22e6a2605 100644
--- a/packages/console/src/components/MultiTextInput/index.tsx
+++ b/packages/console/src/components/MultiTextInput/index.tsx
@@ -25,7 +25,7 @@ export type Props = {
   className?: string;
 };
 
-const MultiTextInput = ({
+function MultiTextInput({
   title,
   value,
   onChange,
@@ -33,7 +33,7 @@ const MultiTextInput = ({
   error,
   placeholder,
   className,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const [deleteFieldIndex, setDeleteFieldIndex] = useState<number>();
@@ -127,6 +127,6 @@ const MultiTextInput = ({
       </ConfirmModal>
     </div>
   );
-};
+}
 
 export default MultiTextInput;
diff --git a/packages/console/src/components/MultiTextInputField/index.tsx b/packages/console/src/components/MultiTextInputField/index.tsx
index 3cdb2165f..2ebcff415 100644
--- a/packages/console/src/components/MultiTextInputField/index.tsx
+++ b/packages/console/src/components/MultiTextInputField/index.tsx
@@ -12,23 +12,25 @@ type Props = MultiTextInputProps &
     formFieldClassName?: FormFieldProps['className'];
   };
 
-const MultiTextInputField = ({
+function MultiTextInputField({
   title,
   isRequired,
   tip,
   formFieldClassName,
   value,
   ...rest
-}: Props) => (
-  <FormField
-    title={title}
-    isRequired={isRequired}
-    tip={tip}
-    className={formFieldClassName}
-    headlineClassName={conditional(value && value.length > 1 && styles.headlineWithMultiInputs)}
-  >
-    <MultiTextInput title={title} value={value} {...rest} />
-  </FormField>
-);
+}: Props) {
+  return (
+    <FormField
+      title={title}
+      isRequired={isRequired}
+      tip={tip}
+      className={formFieldClassName}
+      headlineClassName={conditional(value && value.length > 1 && styles.headlineWithMultiInputs)}
+    >
+      <MultiTextInput title={title} value={value} {...rest} />
+    </FormField>
+  );
+}
 
 export default MultiTextInputField;
diff --git a/packages/console/src/components/OverlayScrollbar/index.tsx b/packages/console/src/components/OverlayScrollbar/index.tsx
index 0a6069faa..bafaa34bd 100644
--- a/packages/console/src/components/OverlayScrollbar/index.tsx
+++ b/packages/console/src/components/OverlayScrollbar/index.tsx
@@ -1,11 +1,13 @@
 import type { OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 
-const OverlayScrollbar = (props: OverlayScrollbarsComponentProps) => (
-  <OverlayScrollbarsComponent
-    options={{ scrollbars: { autoHide: 'leave', autoHideDelay: 0 } }}
-    {...props}
-  />
-);
+function OverlayScrollbar(props: OverlayScrollbarsComponentProps) {
+  return (
+    <OverlayScrollbarsComponent
+      options={{ scrollbars: { autoHide: 'leave', autoHideDelay: 0 } }}
+      {...props}
+    />
+  );
+}
 
 export default OverlayScrollbar;
diff --git a/packages/console/src/components/Pagination/Next.tsx b/packages/console/src/components/Pagination/Next.tsx
index bbe6cf9bc..2f25b5f9a 100644
--- a/packages/console/src/components/Pagination/Next.tsx
+++ b/packages/console/src/components/Pagination/Next.tsx
@@ -1,4 +1,4 @@
-const Next = () => {
+function Next() {
   return (
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -7,6 +7,6 @@ const Next = () => {
       />
     </svg>
   );
-};
+}
 
 export default Next;
diff --git a/packages/console/src/components/Pagination/Previous.tsx b/packages/console/src/components/Pagination/Previous.tsx
index 43fca27f2..b67dd76c4 100644
--- a/packages/console/src/components/Pagination/Previous.tsx
+++ b/packages/console/src/components/Pagination/Previous.tsx
@@ -1,4 +1,4 @@
-const Previous = () => {
+function Previous() {
   return (
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -7,6 +7,6 @@ const Previous = () => {
       />
     </svg>
   );
-};
+}
 
 export default Previous;
diff --git a/packages/console/src/components/Pagination/index.tsx b/packages/console/src/components/Pagination/index.tsx
index eac790186..7f0f10979 100644
--- a/packages/console/src/components/Pagination/index.tsx
+++ b/packages/console/src/components/Pagination/index.tsx
@@ -19,14 +19,7 @@ export type Props = {
   onChange?: (pageIndex: number) => void;
 };
 
-const Pagination = ({
-  page,
-  totalCount,
-  pageSize,
-  className,
-  mode = 'normal',
-  onChange,
-}: Props) => {
+function Pagination({ page, totalCount, pageSize, className, mode = 'normal', onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   /**
@@ -77,6 +70,6 @@ const Pagination = ({
       />
     </div>
   );
-};
+}
 
 export default Pagination;
diff --git a/packages/console/src/components/PermissionsTable/index.tsx b/packages/console/src/components/PermissionsTable/index.tsx
index 2c037f380..8a6dfbaee 100644
--- a/packages/console/src/components/PermissionsTable/index.tsx
+++ b/packages/console/src/components/PermissionsTable/index.tsx
@@ -44,7 +44,7 @@ type Props = {
   retryHandler: () => void;
 };
 
-const PermissionsTable = ({
+function PermissionsTable({
   scopes,
   isLoading,
   errorMessage,
@@ -58,7 +58,7 @@ const PermissionsTable = ({
   createHandler,
   deleteHandler,
   retryHandler,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { getDocumentationUrl } = useDocumentationUrl();
 
@@ -182,6 +182,6 @@ const PermissionsTable = ({
       onRetry={retryHandler}
     />
   );
-};
+}
 
 export default PermissionsTable;
diff --git a/packages/console/src/components/RadioGroup/Radio.tsx b/packages/console/src/components/RadioGroup/Radio.tsx
index 00d257901..dc89da024 100644
--- a/packages/console/src/components/RadioGroup/Radio.tsx
+++ b/packages/console/src/components/RadioGroup/Radio.tsx
@@ -7,14 +7,16 @@ import { useTranslation } from 'react-i18next';
 import type DangerousRaw from '../DangerousRaw';
 import * as styles from './Radio.module.scss';
 
-const Check = () => (
-  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M8.66666 1.33334C4.99999 1.33334 1.99999 4.33334 1.99999 8.00001C1.99999 11.6667 4.99999 14.6667 8.66666 14.6667C12.3333 14.6667 15.3333 11.6667 15.3333 8.00001C15.3333 4.33334 12.3333 1.33334 8.66666 1.33334ZM11.4667 6.86668L8.26666 10.0667C7.99999 10.3333 7.59999 10.3333 7.33333 10.0667L5.86666 8.60001C5.59999 8.33334 5.59999 7.93334 5.86666 7.66668C6.13333 7.40001 6.53333 7.40001 6.79999 7.66668L7.79999 8.66668L10.5333 5.93334C10.8 5.66668 11.2 5.66668 11.4667 5.93334C11.7333 6.20001 11.7333 6.60001 11.4667 6.86668Z"
-      fill="#5D34F2"
-    />
-  </svg>
-);
+function Check() {
+  return (
+    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.66666 1.33334C4.99999 1.33334 1.99999 4.33334 1.99999 8.00001C1.99999 11.6667 4.99999 14.6667 8.66666 14.6667C12.3333 14.6667 15.3333 11.6667 15.3333 8.00001C15.3333 4.33334 12.3333 1.33334 8.66666 1.33334ZM11.4667 6.86668L8.26666 10.0667C7.99999 10.3333 7.59999 10.3333 7.33333 10.0667L5.86666 8.60001C5.59999 8.33334 5.59999 7.93334 5.86666 7.66668C6.13333 7.40001 6.53333 7.40001 6.79999 7.66668L7.79999 8.66668L10.5333 5.93334C10.8 5.66668 11.2 5.66668 11.4667 5.93334C11.7333 6.20001 11.7333 6.60001 11.4667 6.86668Z"
+        fill="#5D34F2"
+      />
+    </svg>
+  );
+}
 
 export type Props = {
   className?: string;
@@ -31,7 +33,7 @@ export type Props = {
   icon?: ReactNode;
 };
 
-const Radio = ({
+function Radio({
   className,
   value,
   title,
@@ -44,7 +46,7 @@ const Radio = ({
   isDisabled,
   disabledLabel,
   icon,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const handleKeyPress: KeyboardEventHandler<HTMLDivElement> = useCallback(
@@ -95,6 +97,6 @@ const Radio = ({
       </div>
     </div>
   );
-};
+}
 
 export default Radio;
diff --git a/packages/console/src/components/RadioGroup/index.tsx b/packages/console/src/components/RadioGroup/index.tsx
index 395ac8973..3c70d6213 100644
--- a/packages/console/src/components/RadioGroup/index.tsx
+++ b/packages/console/src/components/RadioGroup/index.tsx
@@ -24,10 +24,10 @@ type Props = {
   onChange?: (value: string) => void;
 };
 
-const RadioGroup = (
+function RadioGroup(
   { name, children, value, className, onChange, type = 'plain' }: Props,
   ref?: Ref<HTMLDivElement>
-) => {
+) {
   return (
     <div ref={ref} className={classNames(styles.radioGroup, styles[type], className)}>
       {Children.map(children, (child) => {
@@ -56,7 +56,7 @@ const RadioGroup = (
       })}
     </div>
   );
-};
+}
 
 export default forwardRef<HTMLDivElement, Props>(RadioGroup);
 export { default as Radio } from './Radio';
diff --git a/packages/console/src/components/RequestDataError/index.tsx b/packages/console/src/components/RequestDataError/index.tsx
index d4855160e..ff306b536 100644
--- a/packages/console/src/components/RequestDataError/index.tsx
+++ b/packages/console/src/components/RequestDataError/index.tsx
@@ -17,7 +17,7 @@ type Props = {
   className?: string;
 };
 
-const RequestDataError = ({ error, onRetry, className }: Props) => {
+function RequestDataError({ error, onRetry, className }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
   const errorMessage = error.body?.message ?? error.message;
@@ -34,6 +34,6 @@ const RequestDataError = ({ error, onRetry, className }: Props) => {
       {onRetry && <Button title="general.retry" onClick={onRetry} />}
     </Card>
   );
-};
+}
 
 export default RequestDataError;
diff --git a/packages/console/src/components/RoleScopesTransfer/components/ResourceItem/index.tsx b/packages/console/src/components/RoleScopesTransfer/components/ResourceItem/index.tsx
index 2c84143eb..513407b47 100644
--- a/packages/console/src/components/RoleScopesTransfer/components/ResourceItem/index.tsx
+++ b/packages/console/src/components/RoleScopesTransfer/components/ResourceItem/index.tsx
@@ -20,7 +20,7 @@ type Props = {
   onSelectScope: (scope: ScopeResponse) => void;
 };
 
-const ResourceItem = ({ resource, selectedScopes, onSelectResource, onSelectScope }: Props) => {
+function ResourceItem({ resource, selectedScopes, onSelectResource, onSelectScope }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { name, scopes } = resource;
   const selectedScopesCount = selectedScopes.length;
@@ -69,6 +69,6 @@ const ResourceItem = ({ resource, selectedScopes, onSelectResource, onSelectScop
       </div>
     </div>
   );
-};
+}
 
 export default ResourceItem;
diff --git a/packages/console/src/components/RoleScopesTransfer/components/SourceScopeItem/index.tsx b/packages/console/src/components/RoleScopesTransfer/components/SourceScopeItem/index.tsx
index dc22218be..18c196a7e 100644
--- a/packages/console/src/components/RoleScopesTransfer/components/SourceScopeItem/index.tsx
+++ b/packages/console/src/components/RoleScopesTransfer/components/SourceScopeItem/index.tsx
@@ -11,28 +11,30 @@ type Props = {
   onSelect: (scope: ScopeResponse) => void;
 };
 
-const SourceScopeItem = ({ scope, scope: { name }, isSelected, onSelect }: Props) => (
-  <div className={styles.sourceScopeItem}>
-    <Checkbox
-      checked={isSelected}
-      onChange={() => {
-        onSelect(scope);
-      }}
-    />
-    <div
-      className={styles.name}
-      role="button"
-      tabIndex={0}
-      onKeyDown={onKeyDownHandler(() => {
-        onSelect(scope);
-      })}
-      onClick={() => {
-        onSelect(scope);
-      }}
-    >
-      {name}
+function SourceScopeItem({ scope, scope: { name }, isSelected, onSelect }: Props) {
+  return (
+    <div className={styles.sourceScopeItem}>
+      <Checkbox
+        checked={isSelected}
+        onChange={() => {
+          onSelect(scope);
+        }}
+      />
+      <div
+        className={styles.name}
+        role="button"
+        tabIndex={0}
+        onKeyDown={onKeyDownHandler(() => {
+          onSelect(scope);
+        })}
+        onClick={() => {
+          onSelect(scope);
+        }}
+      >
+        {name}
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default SourceScopeItem;
diff --git a/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx b/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx
index 881a2bea4..29608a5cf 100644
--- a/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx
+++ b/packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx
@@ -23,7 +23,7 @@ type Props = {
   onChange: (value: ScopeResponse[]) => void;
 };
 
-const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
+function SourceScopesBox({ roleId, selectedScopes, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const { data: allResources, error: fetchAllResourcesError } = useSWR<
@@ -154,6 +154,6 @@ const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default SourceScopesBox;
diff --git a/packages/console/src/components/RoleScopesTransfer/components/TargetScopeItem/index.tsx b/packages/console/src/components/RoleScopesTransfer/components/TargetScopeItem/index.tsx
index 66ee1892f..e32a84e7c 100644
--- a/packages/console/src/components/RoleScopesTransfer/components/TargetScopeItem/index.tsx
+++ b/packages/console/src/components/RoleScopesTransfer/components/TargetScopeItem/index.tsx
@@ -10,7 +10,7 @@ export type Props = {
   onDelete: (scope: ScopeResponse) => void;
 };
 
-const TargetScopeItem = ({ scope, onDelete }: Props) => {
+function TargetScopeItem({ scope, onDelete }: Props) {
   const {
     name,
     resource: { name: resourceName },
@@ -33,6 +33,6 @@ const TargetScopeItem = ({ scope, onDelete }: Props) => {
       </IconButton>
     </div>
   );
-};
+}
 
 export default TargetScopeItem;
diff --git a/packages/console/src/components/RoleScopesTransfer/components/TargetScopesBox/index.tsx b/packages/console/src/components/RoleScopesTransfer/components/TargetScopesBox/index.tsx
index 67e006c41..508db33d2 100644
--- a/packages/console/src/components/RoleScopesTransfer/components/TargetScopesBox/index.tsx
+++ b/packages/console/src/components/RoleScopesTransfer/components/TargetScopesBox/index.tsx
@@ -11,7 +11,7 @@ type Props = {
   onChange: (value: ScopeResponse[]) => void;
 };
 
-const TargetScopesBox = ({ selectedScopes, onChange }: Props) => {
+function TargetScopesBox({ selectedScopes, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -34,6 +34,6 @@ const TargetScopesBox = ({ selectedScopes, onChange }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default TargetScopesBox;
diff --git a/packages/console/src/components/RoleScopesTransfer/index.tsx b/packages/console/src/components/RoleScopesTransfer/index.tsx
index 4b1c37366..14f408ad2 100644
--- a/packages/console/src/components/RoleScopesTransfer/index.tsx
+++ b/packages/console/src/components/RoleScopesTransfer/index.tsx
@@ -13,12 +13,14 @@ type Props = {
   onChange: (value: ScopeResponse[]) => void;
 };
 
-const RoleScopesTransfer = ({ roleId, value, onChange }: Props) => (
-  <div className={classNames(transferLayout.container, styles.roleScopesTransfer)}>
-    <SourceScopesBox roleId={roleId} selectedScopes={value} onChange={onChange} />
-    <div className={transferLayout.verticalBar} />
-    <TargetScopesBox selectedScopes={value} onChange={onChange} />
-  </div>
-);
+function RoleScopesTransfer({ roleId, value, onChange }: Props) {
+  return (
+    <div className={classNames(transferLayout.container, styles.roleScopesTransfer)}>
+      <SourceScopesBox roleId={roleId} selectedScopes={value} onChange={onChange} />
+      <div className={transferLayout.verticalBar} />
+      <TargetScopesBox selectedScopes={value} onChange={onChange} />
+    </div>
+  );
+}
 
 export default RoleScopesTransfer;
diff --git a/packages/console/src/components/RoleUsersTransfer/components/SourceUserItem/index.tsx b/packages/console/src/components/RoleUsersTransfer/components/SourceUserItem/index.tsx
index 45c7c1cf5..41431a7e8 100644
--- a/packages/console/src/components/RoleUsersTransfer/components/SourceUserItem/index.tsx
+++ b/packages/console/src/components/RoleUsersTransfer/components/SourceUserItem/index.tsx
@@ -13,7 +13,7 @@ type Props = {
   onSelect: () => void;
 };
 
-const SourceUserItem = ({ user, isSelected, onSelect }: Props) => {
+function SourceUserItem({ user, isSelected, onSelect }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -38,6 +38,6 @@ const SourceUserItem = ({ user, isSelected, onSelect }: Props) => {
       <div className={styles.name}>{user.name ?? t('users.unnamed')}</div>
     </div>
   );
-};
+}
 
 export default SourceUserItem;
diff --git a/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx b/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx
index cba7f59df..d2d64eb6a 100644
--- a/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx
+++ b/packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx
@@ -27,7 +27,7 @@ type Props = {
 
 const pageSize = defaultPageSize;
 
-const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
+function SourceUsersBox({ roleId, selectedUsers, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [page, setPage] = useState(1);
   const [keyword, setKeyword] = useState('');
@@ -105,5 +105,5 @@ const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
       />
     </div>
   );
-};
+}
 export default SourceUsersBox;
diff --git a/packages/console/src/components/RoleUsersTransfer/components/TargetUserItem/index.tsx b/packages/console/src/components/RoleUsersTransfer/components/TargetUserItem/index.tsx
index ee00b9779..fff71b948 100644
--- a/packages/console/src/components/RoleUsersTransfer/components/TargetUserItem/index.tsx
+++ b/packages/console/src/components/RoleUsersTransfer/components/TargetUserItem/index.tsx
@@ -12,7 +12,7 @@ type Props = {
   onDelete: () => void;
 };
 
-const TargetUserItem = ({ user, onDelete }: Props) => {
+function TargetUserItem({ user, onDelete }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -30,6 +30,6 @@ const TargetUserItem = ({ user, onDelete }: Props) => {
       </IconButton>
     </div>
   );
-};
+}
 
 export default TargetUserItem;
diff --git a/packages/console/src/components/RoleUsersTransfer/components/TargetUsersBox/index.tsx b/packages/console/src/components/RoleUsersTransfer/components/TargetUsersBox/index.tsx
index e9d3ed0f3..425d548fa 100644
--- a/packages/console/src/components/RoleUsersTransfer/components/TargetUsersBox/index.tsx
+++ b/packages/console/src/components/RoleUsersTransfer/components/TargetUsersBox/index.tsx
@@ -11,7 +11,7 @@ type Props = {
   onChange: (value: User[]) => void;
 };
 
-const TargetUsersBox = ({ selectedUsers, onChange }: Props) => {
+function TargetUsersBox({ selectedUsers, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -35,6 +35,6 @@ const TargetUsersBox = ({ selectedUsers, onChange }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default TargetUsersBox;
diff --git a/packages/console/src/components/RoleUsersTransfer/index.tsx b/packages/console/src/components/RoleUsersTransfer/index.tsx
index c0d91902f..a8abde791 100644
--- a/packages/console/src/components/RoleUsersTransfer/index.tsx
+++ b/packages/console/src/components/RoleUsersTransfer/index.tsx
@@ -13,12 +13,14 @@ type Props = {
   onChange: (value: User[]) => void;
 };
 
-const RoleUsersTransfer = ({ roleId, value, onChange }: Props) => (
-  <div className={classNames(transferLayout.container, styles.roleUsersTransfer)}>
-    <SourceUsersBox roleId={roleId} selectedUsers={value} onChange={onChange} />
-    <div className={transferLayout.verticalBar} />
-    <TargetUsersBox selectedUsers={value} onChange={onChange} />
-  </div>
-);
+function RoleUsersTransfer({ roleId, value, onChange }: Props) {
+  return (
+    <div className={classNames(transferLayout.container, styles.roleUsersTransfer)}>
+      <SourceUsersBox roleId={roleId} selectedUsers={value} onChange={onChange} />
+      <div className={transferLayout.verticalBar} />
+      <TargetUsersBox selectedUsers={value} onChange={onChange} />
+    </div>
+  );
+}
 
 export default RoleUsersTransfer;
diff --git a/packages/console/src/components/Search/index.tsx b/packages/console/src/components/Search/index.tsx
index 9c9dc865f..5bdca5423 100644
--- a/packages/console/src/components/Search/index.tsx
+++ b/packages/console/src/components/Search/index.tsx
@@ -17,14 +17,14 @@ type Props = {
   onClearSearch?: () => void;
 };
 
-const Search = ({
+function Search({
   defaultValue = '',
   isClearable = false,
   placeholder,
   inputClassName,
   onSearch,
   onClearSearch,
-}: Props) => {
+}: Props) {
   const [inputValue, setInputValue] = useState<string>(defaultValue);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -58,6 +58,6 @@ const Search = ({
       )}
     </div>
   );
-};
+}
 
 export default Search;
diff --git a/packages/console/src/components/Select/index.tsx b/packages/console/src/components/Select/index.tsx
index b2e508fd9..0bb154e90 100644
--- a/packages/console/src/components/Select/index.tsx
+++ b/packages/console/src/components/Select/index.tsx
@@ -28,7 +28,7 @@ type Props<T> = {
   size?: 'small' | 'medium' | 'large';
 };
 
-const Select = <T extends string>({
+function Select<T extends string>({
   className,
   value,
   options,
@@ -38,7 +38,7 @@ const Select = <T extends string>({
   placeholder,
   isClearable,
   size = 'large',
-}: Props<T>) => {
+}: Props<T>) {
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef<HTMLInputElement>(null);
   const current = options.find((option) => value && option.value === value);
@@ -116,6 +116,6 @@ const Select = <T extends string>({
       </Dropdown>
     </>
   );
-};
+}
 
 export default Select;
diff --git a/packages/console/src/components/SessionExpired/index.tsx b/packages/console/src/components/SessionExpired/index.tsx
index 4bb6cf896..7d375c8ec 100644
--- a/packages/console/src/components/SessionExpired/index.tsx
+++ b/packages/console/src/components/SessionExpired/index.tsx
@@ -10,7 +10,7 @@ type Props = {
   callbackHref?: string;
 };
 
-const SessionExpired = ({ callbackHref = '/callback', error }: Props) => {
+function SessionExpired({ callbackHref = '/callback', error }: Props) {
   const { signIn, signOut } = useLogto();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -31,6 +31,6 @@ const SessionExpired = ({ callbackHref = '/callback', error }: Props) => {
       />
     </AppError>
   );
-};
+}
 
 export default SessionExpired;
diff --git a/packages/console/src/components/SignInExperiencePreview/components/ToggleUiThemeButton/index.tsx b/packages/console/src/components/SignInExperiencePreview/components/ToggleUiThemeButton/index.tsx
index b75034a1a..2898c7d2f 100644
--- a/packages/console/src/components/SignInExperiencePreview/components/ToggleUiThemeButton/index.tsx
+++ b/packages/console/src/components/SignInExperiencePreview/components/ToggleUiThemeButton/index.tsx
@@ -16,13 +16,13 @@ type Props = {
   size?: ButtonProps['size'];
 };
 
-const ToggleUiThemeButton = ({
+function ToggleUiThemeButton({
   value,
   onToggle,
   className,
   iconClassName,
   size = 'medium',
-}: Props) => {
+}: Props) {
   const ThemeIcon = value === Theme.Light ? Sun : Moon;
 
   return (
@@ -37,6 +37,6 @@ const ToggleUiThemeButton = ({
       />
     </div>
   );
-};
+}
 
 export default ToggleUiThemeButton;
diff --git a/packages/console/src/components/SignInExperiencePreview/index.tsx b/packages/console/src/components/SignInExperiencePreview/index.tsx
index 6250481e2..bf6c81ee1 100644
--- a/packages/console/src/components/SignInExperiencePreview/index.tsx
+++ b/packages/console/src/components/SignInExperiencePreview/index.tsx
@@ -25,7 +25,7 @@ type Props = {
   signInExperience?: SignInExperience;
 };
 
-const SignInExperiencePreview = ({ platform, mode, language = 'en', signInExperience }: Props) => {
+function SignInExperiencePreview({ platform, mode, language = 'en', signInExperience }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const { customPhrases } = useUiLanguages();
@@ -139,6 +139,6 @@ const SignInExperiencePreview = ({ platform, mode, language = 'en', signInExperi
       </div>
     </div>
   );
-};
+}
 
 export default SignInExperiencePreview;
diff --git a/packages/console/src/components/Spacer/index.tsx b/packages/console/src/components/Spacer/index.tsx
index 207c79b7f..448c78908 100644
--- a/packages/console/src/components/Spacer/index.tsx
+++ b/packages/console/src/components/Spacer/index.tsx
@@ -1,7 +1,7 @@
 import * as styles from './index.module.scss';
 
-const Spacer = () => {
+function Spacer() {
   return <div className={styles.spacer} />;
-};
+}
 
 export default Spacer;
diff --git a/packages/console/src/components/Spinner/index.tsx b/packages/console/src/components/Spinner/index.tsx
index 5cab41b76..c22cb6112 100644
--- a/packages/console/src/components/Spinner/index.tsx
+++ b/packages/console/src/components/Spinner/index.tsx
@@ -6,133 +6,137 @@ type Props = {
   className?: string;
 };
 
-const Ring = ({ className }: Props) => (
-  <svg
-    className={classNames(styles.ring, className)}
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M9.33566 14.8714C9.44104 15.4135 9.08652 15.9451 8.53547 15.9821C7.4048 16.0579 6.2669 15.8929 5.19834 15.4934C3.81639 14.9767 2.60425 14.0879 1.69591 12.9253C0.78758 11.7627 0.218443 10.3715 0.0514252 8.90563C-0.115592 7.43973 0.126015 5.9562 0.749537 4.61905C1.37306 3.28191 2.35421 2.14323 3.5845 1.32891C4.8148 0.514598 6.24632 0.0563637 7.7208 0.00487344C9.19528 -0.0466168 10.6553 0.310643 11.9394 1.03715C12.9323 1.59891 13.7901 2.36452 14.4588 3.27942C14.7847 3.72531 14.6054 4.33858 14.1223 4.60633C13.6393 4.87408 13.0366 4.69278 12.6924 4.26086C12.2154 3.66218 11.6262 3.15785 10.9545 2.77787C9.99146 2.23298 8.89646 1.96504 7.7906 2.00366C6.68474 2.04227 5.6111 2.38595 4.68838 2.99669C3.76565 3.60742 3.02979 4.46143 2.56215 5.46429C2.09451 6.46715 1.91331 7.5798 2.03857 8.67922C2.16383 9.77864 2.59069 10.822 3.27194 11.694C3.95319 12.5659 4.8623 13.2325 5.89876 13.62C6.62154 13.8903 7.38663 14.0175 8.15188 13.9981C8.70399 13.9841 9.23028 14.3293 9.33566 14.8714Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+function Ring({ className }: Props) {
+  return (
+    <svg
+      className={classNames(styles.ring, className)}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.33566 14.8714C9.44104 15.4135 9.08652 15.9451 8.53547 15.9821C7.4048 16.0579 6.2669 15.8929 5.19834 15.4934C3.81639 14.9767 2.60425 14.0879 1.69591 12.9253C0.78758 11.7627 0.218443 10.3715 0.0514252 8.90563C-0.115592 7.43973 0.126015 5.9562 0.749537 4.61905C1.37306 3.28191 2.35421 2.14323 3.5845 1.32891C4.8148 0.514598 6.24632 0.0563637 7.7208 0.00487344C9.19528 -0.0466168 10.6553 0.310643 11.9394 1.03715C12.9323 1.59891 13.7901 2.36452 14.4588 3.27942C14.7847 3.72531 14.6054 4.33858 14.1223 4.60633C13.6393 4.87408 13.0366 4.69278 12.6924 4.26086C12.2154 3.66218 11.6262 3.15785 10.9545 2.77787C9.99146 2.23298 8.89646 1.96504 7.7906 2.00366C6.68474 2.04227 5.6111 2.38595 4.68838 2.99669C3.76565 3.60742 3.02979 4.46143 2.56215 5.46429C2.09451 6.46715 1.91331 7.5798 2.03857 8.67922C2.16383 9.77864 2.59069 10.822 3.27194 11.694C3.95319 12.5659 4.8623 13.2325 5.89876 13.62C6.62154 13.8903 7.38663 14.0175 8.15188 13.9981C8.70399 13.9841 9.23028 14.3293 9.33566 14.8714Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
 
-const Daisy = ({ className }: Props) => (
-  <svg
-    className={classNames(styles.daisy, className)}
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect opacity="0.48" x="15" width="2" height="8" rx="1" fill="currentColor" />
-    <rect opacity="0.96" x="15" y="24" width="2" height="8" rx="1" fill="currentColor" />
-    <rect
-      opacity="0.72"
-      y="17"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-90 0 17)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.24"
-      x="24"
-      y="17"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-90 24 17)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.32"
-      x="29.3564"
-      y="7.13403"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(60 29.3564 7.13403)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.8"
-      x="8.57227"
-      y="19.134"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(60 8.57227 19.134)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.64"
-      x="1.64355"
-      y="8.86597"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-60 1.64355 8.86597)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.16"
-      x="22.4277"
-      y="20.866"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-60 22.4277 20.866)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.4"
-      x="23.1338"
-      y="1.64355"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(30 23.1338 1.64355)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.88"
-      x="11.1338"
-      y="22.4282"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(30 11.1338 22.4282)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.56"
-      x="7.13379"
-      y="2.64355"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-30 7.13379 2.64355)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.08"
-      x="19.1338"
-      y="23.4282"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-30 19.1338 23.4282)"
-      fill="currentColor"
-    />
-  </svg>
-);
+function Daisy({ className }: Props) {
+  return (
+    <svg
+      className={classNames(styles.daisy, className)}
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect opacity="0.48" x="15" width="2" height="8" rx="1" fill="currentColor" />
+      <rect opacity="0.96" x="15" y="24" width="2" height="8" rx="1" fill="currentColor" />
+      <rect
+        opacity="0.72"
+        y="17"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-90 0 17)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.24"
+        x="24"
+        y="17"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-90 24 17)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.32"
+        x="29.3564"
+        y="7.13403"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(60 29.3564 7.13403)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.8"
+        x="8.57227"
+        y="19.134"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(60 8.57227 19.134)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.64"
+        x="1.64355"
+        y="8.86597"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-60 1.64355 8.86597)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.16"
+        x="22.4277"
+        y="20.866"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-60 22.4277 20.866)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.4"
+        x="23.1338"
+        y="1.64355"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(30 23.1338 1.64355)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.88"
+        x="11.1338"
+        y="22.4282"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(30 11.1338 22.4282)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.56"
+        x="7.13379"
+        y="2.64355"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-30 7.13379 2.64355)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.08"
+        x="19.1338"
+        y="23.4282"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-30 19.1338 23.4282)"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
 
 export { Ring, Daisy };
diff --git a/packages/console/src/components/Status/index.tsx b/packages/console/src/components/Status/index.tsx
index e1e84e03a..1dae2a3d1 100644
--- a/packages/console/src/components/Status/index.tsx
+++ b/packages/console/src/components/Status/index.tsx
@@ -9,11 +9,13 @@ type Props = {
   variant?: 'plain' | 'outlined';
 };
 
-const Status = ({ status, children, variant = 'plain' }: Props) => (
-  <div className={classNames(styles.status, styles[status], styles[variant])}>
-    <div className={styles.icon} />
-    <div>{children}</div>
-  </div>
-);
+function Status({ status, children, variant = 'plain' }: Props) {
+  return (
+    <div className={classNames(styles.status, styles[status], styles[variant])}>
+      <div className={styles.icon} />
+      <div>{children}</div>
+    </div>
+  );
+}
 
 export default Status;
diff --git a/packages/console/src/components/SubmitFormChangesActionBar/index.tsx b/packages/console/src/components/SubmitFormChangesActionBar/index.tsx
index 64265813d..a18a8235e 100644
--- a/packages/console/src/components/SubmitFormChangesActionBar/index.tsx
+++ b/packages/console/src/components/SubmitFormChangesActionBar/index.tsx
@@ -10,26 +10,28 @@ type Props = {
   onDiscard: () => void;
 };
 
-const SubmitFormChangesActionBar = ({ isOpen, isSubmitting, onSubmit, onDiscard }: Props) => (
-  <div className={classNames(styles.container, isOpen && styles.active)}>
-    <div className={styles.actionBar}>
-      <Button
-        size="medium"
-        title="general.discard"
-        disabled={isSubmitting}
-        onClick={() => {
-          onDiscard();
-        }}
-      />
-      <Button
-        isLoading={isSubmitting}
-        type="primary"
-        size="medium"
-        title="general.save_changes"
-        onClick={async () => onSubmit()}
-      />
+function SubmitFormChangesActionBar({ isOpen, isSubmitting, onSubmit, onDiscard }: Props) {
+  return (
+    <div className={classNames(styles.container, isOpen && styles.active)}>
+      <div className={styles.actionBar}>
+        <Button
+          size="medium"
+          title="general.discard"
+          disabled={isSubmitting}
+          onClick={() => {
+            onDiscard();
+          }}
+        />
+        <Button
+          isLoading={isSubmitting}
+          type="primary"
+          size="medium"
+          title="general.save_changes"
+          onClick={async () => onSubmit()}
+        />
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default SubmitFormChangesActionBar;
diff --git a/packages/console/src/components/Switch/index.tsx b/packages/console/src/components/Switch/index.tsx
index 32273643b..cf398a405 100644
--- a/packages/console/src/components/Switch/index.tsx
+++ b/packages/console/src/components/Switch/index.tsx
@@ -7,7 +7,7 @@ type Props = HTMLProps<HTMLInputElement> & {
   label?: ReactNode;
 };
 
-const Switch = ({ label, ...rest }: Props, ref?: Ref<HTMLInputElement>) => {
+function Switch({ label, ...rest }: Props, ref?: Ref<HTMLInputElement>) {
   return (
     <div className={styles.wrapper}>
       <div className={styles.label}>{label}</div>
@@ -17,6 +17,6 @@ const Switch = ({ label, ...rest }: Props, ref?: Ref<HTMLInputElement>) => {
       </label>
     </div>
   );
-};
+}
 
 export default forwardRef<HTMLInputElement, Props>(Switch);
diff --git a/packages/console/src/components/TabNav/TabNavItem.tsx b/packages/console/src/components/TabNav/TabNavItem.tsx
index dc35adeb9..80324463f 100644
--- a/packages/console/src/components/TabNav/TabNavItem.tsx
+++ b/packages/console/src/components/TabNav/TabNavItem.tsx
@@ -24,7 +24,7 @@ type Props =
   | (BaseProps & LinkStyleProps & Partial<Record<keyof TabStyleProps, undefined>>)
   | (BaseProps & TabStyleProps & Partial<Record<keyof LinkStyleProps, undefined>>);
 
-const TabNavItem = ({ children, href, isActive, errorCount = 0, onClick }: Props) => {
+function TabNavItem({ children, href, isActive, errorCount = 0, onClick }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const location = useLocation();
   const selected = href ? location.pathname === href : isActive;
@@ -46,6 +46,6 @@ const TabNavItem = ({ children, href, isActive, errorCount = 0, onClick }: Props
       )}
     </div>
   );
-};
+}
 
 export default TabNavItem;
diff --git a/packages/console/src/components/TabNav/index.tsx b/packages/console/src/components/TabNav/index.tsx
index 84bf301b2..fb5ff046c 100644
--- a/packages/console/src/components/TabNav/index.tsx
+++ b/packages/console/src/components/TabNav/index.tsx
@@ -9,8 +9,8 @@ type Props = {
   children: React.ReactNode;
 };
 
-const TabNav = ({ className, children }: Props) => (
-  <nav className={classNames(styles.nav, className)}>{children}</nav>
-);
+function TabNav({ className, children }: Props) {
+  return <nav className={classNames(styles.nav, className)}>{children}</nav>;
+}
 
 export default TabNav;
diff --git a/packages/console/src/components/Table/TableEmptyWrapper.tsx b/packages/console/src/components/Table/TableEmptyWrapper.tsx
index fda0def17..1a1e160dd 100644
--- a/packages/console/src/components/Table/TableEmptyWrapper.tsx
+++ b/packages/console/src/components/Table/TableEmptyWrapper.tsx
@@ -7,12 +7,14 @@ type Props = {
   children: ReactNode;
 };
 
-const TableEmptyWrapper = ({ columns, children }: Props) => (
-  <tr>
-    <td colSpan={columns} className={styles.tableEmptyWrapper}>
-      <div className={styles.content}>{children}</div>
-    </td>
-  </tr>
-);
+function TableEmptyWrapper({ columns, children }: Props) {
+  return (
+    <tr>
+      <td colSpan={columns} className={styles.tableEmptyWrapper}>
+        <div className={styles.content}>{children}</div>
+      </td>
+    </tr>
+  );
+}
 
 export default TableEmptyWrapper;
diff --git a/packages/console/src/components/Table/TableError.tsx b/packages/console/src/components/Table/TableError.tsx
index 070ba1c83..f2d68672a 100644
--- a/packages/console/src/components/Table/TableError.tsx
+++ b/packages/console/src/components/Table/TableError.tsx
@@ -15,7 +15,7 @@ type Props = {
   columns: number;
 };
 
-const TableError = ({ title, content, onRetry, columns }: Props) => {
+function TableError({ title, content, onRetry, columns }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
 
@@ -31,6 +31,6 @@ const TableError = ({ title, content, onRetry, columns }: Props) => {
       </td>
     </tr>
   );
-};
+}
 
 export default TableError;
diff --git a/packages/console/src/components/Table/TableLoading.tsx b/packages/console/src/components/Table/TableLoading.tsx
index e386a04ba..218839cad 100644
--- a/packages/console/src/components/Table/TableLoading.tsx
+++ b/packages/console/src/components/Table/TableLoading.tsx
@@ -4,7 +4,7 @@ type Props = {
   columnSpans: number[];
 };
 
-const TableLoading = ({ columnSpans }: Props) => {
+function TableLoading({ columnSpans }: Props) {
   return (
     <>
       {Array.from({ length: 8 }).map((_, rowIndex) => (
@@ -29,6 +29,6 @@ const TableLoading = ({ columnSpans }: Props) => {
       ))}
     </>
   );
-};
+}
 
 export default TableLoading;
diff --git a/packages/console/src/components/Table/TablePlaceholder.tsx b/packages/console/src/components/Table/TablePlaceholder.tsx
index 7cc9152ea..47a8ea8a5 100644
--- a/packages/console/src/components/Table/TablePlaceholder.tsx
+++ b/packages/console/src/components/Table/TablePlaceholder.tsx
@@ -17,14 +17,7 @@ type Props = {
   action: ReactNode;
 };
 
-const TablePlaceholder = ({
-  image,
-  imageDark,
-  title,
-  description,
-  learnMoreLink,
-  action,
-}: Props) => {
+function TablePlaceholder({ image, imageDark, title, description, learnMoreLink, action }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
 
@@ -46,6 +39,6 @@ const TablePlaceholder = ({
       {action && <div className={styles.action}>{action}</div>}
     </div>
   );
-};
+}
 
 export default TablePlaceholder;
diff --git a/packages/console/src/components/Table/index.tsx b/packages/console/src/components/Table/index.tsx
index 80601091e..51d6bae8e 100644
--- a/packages/console/src/components/Table/index.tsx
+++ b/packages/console/src/components/Table/index.tsx
@@ -36,7 +36,7 @@ type Props<
   onRetry?: () => void;
 };
 
-const Table = <
+function Table<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
@@ -56,7 +56,7 @@ const Table = <
   errorMessage,
   hasBorder,
   onRetry,
-}: Props<TFieldValues, TName>) => {
+}: Props<TFieldValues, TName>) {
   const totalColspan = columns.reduce((result, { colSpan }) => {
     return result + (colSpan ?? 1);
   }, 0);
@@ -152,6 +152,6 @@ const Table = <
       {pagination && <Pagination className={styles.pagination} {...pagination} />}
     </div>
   );
-};
+}
 
 export default Table;
diff --git a/packages/console/src/components/TextInput/index.tsx b/packages/console/src/components/TextInput/index.tsx
index 12c1a20dd..a83ab7ec4 100644
--- a/packages/console/src/components/TextInput/index.tsx
+++ b/packages/console/src/components/TextInput/index.tsx
@@ -11,7 +11,7 @@ type Props = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
   suffix?: ReactElement;
 };
 
-const TextInput = (
+function TextInput(
   {
     errorMessage,
     hasError = Boolean(errorMessage),
@@ -23,7 +23,7 @@ const TextInput = (
     ...rest
   }: Props,
   reference: ForwardedRef<HTMLInputElement>
-) => {
+) {
   return (
     <div className={className}>
       <div
@@ -45,6 +45,6 @@ const TextInput = (
       {hasError && errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
     </div>
   );
-};
+}
 
 export default forwardRef(TextInput);
diff --git a/packages/console/src/components/TextLink/index.tsx b/packages/console/src/components/TextLink/index.tsx
index a9d889b10..652d047b1 100644
--- a/packages/console/src/components/TextLink/index.tsx
+++ b/packages/console/src/components/TextLink/index.tsx
@@ -11,7 +11,7 @@ type Props = AnchorHTMLAttributes<HTMLAnchorElement> &
     isTrailingIcon?: boolean;
   };
 
-const TextLink = ({ to, children, icon, isTrailingIcon = false, className, ...rest }: Props) => {
+function TextLink({ to, children, icon, isTrailingIcon = false, className, ...rest }: Props) {
   if (to) {
     return (
       <Link
@@ -36,6 +36,6 @@ const TextLink = ({ to, children, icon, isTrailingIcon = false, className, ...re
       <>{children}</>
     </a>
   );
-};
+}
 
 export default TextLink;
diff --git a/packages/console/src/components/Textarea/index.tsx b/packages/console/src/components/Textarea/index.tsx
index 6936a600f..f4365552d 100644
--- a/packages/console/src/components/Textarea/index.tsx
+++ b/packages/console/src/components/Textarea/index.tsx
@@ -9,15 +9,15 @@ type Props = HTMLProps<HTMLTextAreaElement> & {
   hasError?: boolean;
 };
 
-const Textarea = (
+function Textarea(
   { className, hasError, ...rest }: Props,
   reference: ForwardedRef<HTMLTextAreaElement>
-) => {
+) {
   return (
     <div className={classNames(styles.container, hasError && styles.error, className)}>
       <textarea {...rest} ref={reference} />
     </div>
   );
-};
+}
 
 export default forwardRef(Textarea);
diff --git a/packages/console/src/components/Tip/TipBubble/index.tsx b/packages/console/src/components/Tip/TipBubble/index.tsx
index 94154e073..af8f4d813 100644
--- a/packages/console/src/components/Tip/TipBubble/index.tsx
+++ b/packages/console/src/components/Tip/TipBubble/index.tsx
@@ -21,7 +21,7 @@ type Props = HTMLProps<HTMLDivElement> & {
 
 const supportHorizontalAlignmentPlacements = new Set<TipBubblePlacement>(['top', 'bottom']);
 
-const TipBubble = (
+function TipBubble(
   {
     children,
     position,
@@ -33,7 +33,7 @@ const TipBubble = (
     ...rest
   }: Props,
   reference: ForwardedRef<HTMLDivElement>
-) => {
+) {
   if (!anchorRef.current) {
     return null;
   }
@@ -64,6 +64,6 @@ const TipBubble = (
       <div className={styles.arrow} style={{ ...arrowPosition }} />
     </div>
   );
-};
+}
 
 export default forwardRef(TipBubble);
diff --git a/packages/console/src/components/Tip/ToggleTip/index.tsx b/packages/console/src/components/Tip/ToggleTip/index.tsx
index 6b38e4b1b..417624f7f 100644
--- a/packages/console/src/components/Tip/ToggleTip/index.tsx
+++ b/packages/console/src/components/Tip/ToggleTip/index.tsx
@@ -25,14 +25,14 @@ export type Props = {
   content?: ((closeTip: () => void) => ReactNode) | ReactNode;
 };
 
-const ToggleTip = ({
+function ToggleTip({
   children,
   className,
   anchorClassName,
   placement = 'top',
   horizontalAlign = 'center',
   content,
-}: Props) => {
+}: Props) {
   const tipBubbleRef = useRef<HTMLDivElement>(null);
   const anchorRef = useRef<HTMLDivElement>(null);
 
@@ -95,6 +95,6 @@ const ToggleTip = ({
       </ReactModal>
     </>
   );
-};
+}
 
 export default ToggleTip;
diff --git a/packages/console/src/components/Tip/Tooltip/index.tsx b/packages/console/src/components/Tip/Tooltip/index.tsx
index 240df8e8b..41cf83063 100644
--- a/packages/console/src/components/Tip/Tooltip/index.tsx
+++ b/packages/console/src/components/Tip/Tooltip/index.tsx
@@ -27,7 +27,7 @@ type Props = {
   content?: ReactNode;
 };
 
-const Tooltip = ({
+function Tooltip({
   className,
   isKeepOpen = false,
   isSuccessful = false,
@@ -36,7 +36,7 @@ const Tooltip = ({
   anchorClassName,
   children,
   content,
-}: Props) => {
+}: Props) {
   const [tooltipDom, setTooltipDom] = useState<HTMLDivElement>();
   const anchorRef = useRef<HTMLDivElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -146,6 +146,6 @@ const Tooltip = ({
         )}
     </>
   );
-};
+}
 
 export default Tooltip;
diff --git a/packages/console/src/components/Toast/index.tsx b/packages/console/src/components/Toast/index.tsx
index e0a9c8602..9d8981430 100644
--- a/packages/console/src/components/Toast/index.tsx
+++ b/packages/console/src/components/Toast/index.tsx
@@ -6,7 +6,7 @@ import Success from '@/assets/images/toast-success.svg';
 
 import * as styles from './index.module.scss';
 
-const Toast = () => {
+function Toast() {
   return (
     <Toaster
       toastOptions={{
@@ -31,6 +31,6 @@ const Toast = () => {
       )}
     </Toaster>
   );
-};
+}
 
 export default Toast;
diff --git a/packages/console/src/components/UnnamedTrans/index.tsx b/packages/console/src/components/UnnamedTrans/index.tsx
index 00f8952bd..a71544540 100644
--- a/packages/console/src/components/UnnamedTrans/index.tsx
+++ b/packages/console/src/components/UnnamedTrans/index.tsx
@@ -5,7 +5,7 @@ type Props = {
   className?: string;
 };
 
-const UnnamedTrans = ({ resource, className }: Props) => {
+function UnnamedTrans({ resource, className }: Props) {
   const {
     i18n: { languages },
   } = useTranslation();
@@ -16,6 +16,6 @@ const UnnamedTrans = ({ resource, className }: Props) => {
   }
 
   return <span className={className}>{resource[matchedLanguage]}</span>;
-};
+}
 
 export default UnnamedTrans;
diff --git a/packages/console/src/components/UnsavedChangesAlertModal/index.tsx b/packages/console/src/components/UnsavedChangesAlertModal/index.tsx
index 42486418a..0bf33fd6e 100644
--- a/packages/console/src/components/UnsavedChangesAlertModal/index.tsx
+++ b/packages/console/src/components/UnsavedChangesAlertModal/index.tsx
@@ -23,7 +23,7 @@ type Props = {
   parentPath?: string;
 };
 
-const UnsavedChangesAlertModal = ({ hasUnsavedChanges, parentPath }: Props) => {
+function UnsavedChangesAlertModal({ hasUnsavedChanges, parentPath }: Props) {
   const { navigator } = useContext(UNSAFE_NavigationContext);
 
   /**
@@ -96,6 +96,6 @@ const UnsavedChangesAlertModal = ({ hasUnsavedChanges, parentPath }: Props) => {
       {t('general.unsaved_changes_warning')}
     </ConfirmModal>
   );
-};
+}
 
 export default UnsavedChangesAlertModal;
diff --git a/packages/console/src/components/Uploader/FileUploader/index.tsx b/packages/console/src/components/Uploader/FileUploader/index.tsx
index d05530117..759d57b82 100644
--- a/packages/console/src/components/Uploader/FileUploader/index.tsx
+++ b/packages/console/src/components/Uploader/FileUploader/index.tsx
@@ -20,13 +20,13 @@ export type Props = {
   onUploadErrorChange: (errorMessage?: string) => void;
 };
 
-const FileUploader = ({
+function FileUploader({
   maxSize,
   allowedMimeTypes,
   actionDescription,
   onCompleted,
   onUploadErrorChange,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [isUploading, setIsUploading] = useState(false);
   const [uploadError, setUploadError] = useState<string>();
@@ -119,6 +119,6 @@ const FileUploader = ({
       </div>
     </div>
   );
-};
+}
 
 export default FileUploader;
diff --git a/packages/console/src/components/Uploader/ImageUploader/index.tsx b/packages/console/src/components/Uploader/ImageUploader/index.tsx
index 88712ce39..b77db9c6f 100644
--- a/packages/console/src/components/Uploader/ImageUploader/index.tsx
+++ b/packages/console/src/components/Uploader/ImageUploader/index.tsx
@@ -22,8 +22,8 @@ export type Props = Omit<FileUploaderProps, 'maxSize' | 'allowedMimeTypes'> & {
   onDelete: () => void;
 };
 
-const ImageUploader = ({ name, value, onDelete, ...rest }: Props) =>
-  value ? (
+function ImageUploader({ name, value, onDelete, ...rest }: Props) {
+  return value ? (
     <div className={styles.imageUploader}>
       <img alt={name} src={value} />
       <IconButton
@@ -38,5 +38,6 @@ const ImageUploader = ({ name, value, onDelete, ...rest }: Props) =>
   ) : (
     <FileUploader allowedMimeTypes={allowedImageMimeTypes} maxSize={maxImageSizeLimit} {...rest} />
   );
+}
 
 export default ImageUploader;
diff --git a/packages/console/src/components/Uploader/ImageUploaderField/index.tsx b/packages/console/src/components/Uploader/ImageUploaderField/index.tsx
index 85407c7bf..f271e76a6 100644
--- a/packages/console/src/components/Uploader/ImageUploaderField/index.tsx
+++ b/packages/console/src/components/Uploader/ImageUploaderField/index.tsx
@@ -12,7 +12,7 @@ type Props = Pick<ImageUploaderProps, 'name' | 'value' | 'actionDescription'> &
   onChange: (value: string) => void;
 };
 
-const ImageUploaderField = ({ onChange, ...rest }: Props) => {
+function ImageUploaderField({ onChange, ...rest }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const limitDescription = t('components.uploader.image_limit', {
@@ -37,6 +37,6 @@ const ImageUploaderField = ({ onChange, ...rest }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default ImageUploaderField;
diff --git a/packages/console/src/components/UserAccountInformation/index.tsx b/packages/console/src/components/UserAccountInformation/index.tsx
index 22d5b7031..9a1a66fc3 100644
--- a/packages/console/src/components/UserAccountInformation/index.tsx
+++ b/packages/console/src/components/UserAccountInformation/index.tsx
@@ -22,7 +22,7 @@ type Props = {
   confirmButtonTitle?: AdminConsoleKey;
 };
 
-const UserAccountInformation = ({
+function UserAccountInformation({
   username,
   password,
   title,
@@ -30,7 +30,7 @@ const UserAccountInformation = ({
   onConfirm,
   passwordLabel,
   confirmButtonTitle,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [passwordVisible, setPasswordVisible] = useState(false);
 
@@ -94,6 +94,6 @@ const UserAccountInformation = ({
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default UserAccountInformation;
diff --git a/packages/console/src/components/UserAvatar/index.tsx b/packages/console/src/components/UserAvatar/index.tsx
index 5476dad9e..0a59a823a 100644
--- a/packages/console/src/components/UserAvatar/index.tsx
+++ b/packages/console/src/components/UserAvatar/index.tsx
@@ -13,7 +13,7 @@ type Props = {
   user?: Partial<Pick<User, 'name' | 'username' | 'avatar' | 'primaryEmail'>>;
 };
 
-const UserAvatar = ({ className, size = 'medium', user }: Props) => {
+function UserAvatar({ className, size = 'medium', user }: Props) {
   const avatarClassName = classNames(styles.avatar, styles[size]);
   const wrapperClassName = classNames(styles.wrapper, styles[size], className);
   const defaultColorPalette = [
@@ -66,6 +66,6 @@ const UserAvatar = ({ className, size = 'medium', user }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default UserAvatar;
diff --git a/packages/console/src/components/UserInfoCard/index.tsx b/packages/console/src/components/UserInfoCard/index.tsx
index f6aee6d2e..c48102f11 100644
--- a/packages/console/src/components/UserInfoCard/index.tsx
+++ b/packages/console/src/components/UserInfoCard/index.tsx
@@ -15,7 +15,7 @@ type Props = {
   avatarSize?: 'medium' | 'large';
 };
 
-const UserInfoCard = ({ className, user, avatarSize = 'medium' }: Props) => {
+function UserInfoCard({ className, user, avatarSize = 'medium' }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const { name, username, avatar, picture, primaryEmail, email } = user ?? {};
@@ -38,6 +38,6 @@ const UserInfoCard = ({ className, user, avatarSize = 'medium' }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default UserInfoCard;
diff --git a/packages/console/src/components/UserName/index.tsx b/packages/console/src/components/UserName/index.tsx
index 5cc1257f4..ee9e19be5 100644
--- a/packages/console/src/components/UserName/index.tsx
+++ b/packages/console/src/components/UserName/index.tsx
@@ -13,7 +13,7 @@ type Props = {
   isLink?: boolean;
 };
 
-const UserName = ({ userId, isLink = false }: Props) => {
+function UserName({ userId, isLink = false }: Props) {
   const { data, error } = useSWR<User, RequestError>(`api/users/${userId}`);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -36,6 +36,6 @@ const UserName = ({ userId, isLink = false }: Props) => {
       <div className={styles.id}>{userId}</div>
     </div>
   );
-};
+}
 
 export default UserName;
diff --git a/packages/console/src/components/UserRolesTransfer/components/SourceRoleItem/index.tsx b/packages/console/src/components/UserRolesTransfer/components/SourceRoleItem/index.tsx
index 746484a74..e1677c716 100644
--- a/packages/console/src/components/UserRolesTransfer/components/SourceRoleItem/index.tsx
+++ b/packages/console/src/components/UserRolesTransfer/components/SourceRoleItem/index.tsx
@@ -12,7 +12,7 @@ type Props = {
   onSelect: () => void;
 };
 
-const SourceRoleItem = ({ role, isSelected, onSelect }: Props) => {
+function SourceRoleItem({ role, isSelected, onSelect }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { name, usersCount } = role;
 
@@ -40,6 +40,6 @@ const SourceRoleItem = ({ role, isSelected, onSelect }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default SourceRoleItem;
diff --git a/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx b/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx
index 39c90d0db..665a34ec6 100644
--- a/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx
+++ b/packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx
@@ -27,7 +27,7 @@ type Props = {
 
 const pageSize = defaultPageSize;
 
-const SourceRolesBox = ({ userId, selectedRoles, onChange }: Props) => {
+function SourceRolesBox({ userId, selectedRoles, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const [page, setPage] = useState(1);
@@ -108,6 +108,6 @@ const SourceRolesBox = ({ userId, selectedRoles, onChange }: Props) => {
       />
     </div>
   );
-};
+}
 
 export default SourceRolesBox;
diff --git a/packages/console/src/components/UserRolesTransfer/components/TargetRoleItem/index.tsx b/packages/console/src/components/UserRolesTransfer/components/TargetRoleItem/index.tsx
index c3949dad3..a45e3110b 100644
--- a/packages/console/src/components/UserRolesTransfer/components/TargetRoleItem/index.tsx
+++ b/packages/console/src/components/UserRolesTransfer/components/TargetRoleItem/index.tsx
@@ -11,7 +11,7 @@ type Props = {
   onDelete: () => void;
 };
 
-const TargetRoleItem = ({ role, onDelete }: Props) => {
+function TargetRoleItem({ role, onDelete }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { name, usersCount } = role;
 
@@ -28,6 +28,6 @@ const TargetRoleItem = ({ role, onDelete }: Props) => {
       </IconButton>
     </div>
   );
-};
+}
 
 export default TargetRoleItem;
diff --git a/packages/console/src/components/UserRolesTransfer/components/TargetRolesBox/index.tsx b/packages/console/src/components/UserRolesTransfer/components/TargetRolesBox/index.tsx
index 5e1dd61f0..530ea71e0 100644
--- a/packages/console/src/components/UserRolesTransfer/components/TargetRolesBox/index.tsx
+++ b/packages/console/src/components/UserRolesTransfer/components/TargetRolesBox/index.tsx
@@ -11,7 +11,7 @@ type Props = {
   onChange: (value: RoleResponse[]) => void;
 };
 
-const TargetRolesBox = ({ selectedRoles, onChange }: Props) => {
+function TargetRolesBox({ selectedRoles, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -35,6 +35,6 @@ const TargetRolesBox = ({ selectedRoles, onChange }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default TargetRolesBox;
diff --git a/packages/console/src/components/UserRolesTransfer/index.tsx b/packages/console/src/components/UserRolesTransfer/index.tsx
index 918042570..41b39f183 100644
--- a/packages/console/src/components/UserRolesTransfer/index.tsx
+++ b/packages/console/src/components/UserRolesTransfer/index.tsx
@@ -13,12 +13,14 @@ type Props = {
   onChange: (value: RoleResponse[]) => void;
 };
 
-const UserRolesTransfer = ({ userId, value, onChange }: Props) => (
-  <div className={classNames(transferLayout.container, styles.rolesTransfer)}>
-    <SourceRolesBox userId={userId} selectedRoles={value} onChange={onChange} />
-    <div className={transferLayout.verticalBar} />
-    <TargetRolesBox selectedRoles={value} onChange={onChange} />
-  </div>
-);
+function UserRolesTransfer({ userId, value, onChange }: Props) {
+  return (
+    <div className={classNames(transferLayout.container, styles.rolesTransfer)}>
+      <SourceRolesBox userId={userId} selectedRoles={value} onChange={onChange} />
+      <div className={transferLayout.verticalBar} />
+      <TargetRolesBox selectedRoles={value} onChange={onChange} />
+    </div>
+  );
+}
 
 export default UserRolesTransfer;
diff --git a/packages/console/src/components/VerificationCodeInput/index.tsx b/packages/console/src/components/VerificationCodeInput/index.tsx
index 4eb1f0862..d6a0248e8 100644
--- a/packages/console/src/components/VerificationCodeInput/index.tsx
+++ b/packages/console/src/components/VerificationCodeInput/index.tsx
@@ -29,14 +29,14 @@ const normalize = (value: string[], length: number): string[] => {
   return value;
 };
 
-const VerificationCodeInput = ({
+function VerificationCodeInput({
   name,
   className,
   value,
   length = defaultLength,
   error,
   onChange,
-}: Props) => {
+}: Props) {
   /* eslint-disable @typescript-eslint/ban-types */
   const inputReferences = useRef<Array<HTMLInputElement | null>>(
     Array.from<null>({ length }).fill(null)
@@ -215,6 +215,6 @@ const VerificationCodeInput = ({
       {error && <div className={styles.errorMessage}>{error}</div>}
     </div>
   );
-};
+}
 
 export default VerificationCodeInput;
diff --git a/packages/console/src/containers/AppBoundary/index.tsx b/packages/console/src/containers/AppBoundary/index.tsx
index c65458711..7888b4f66 100644
--- a/packages/console/src/containers/AppBoundary/index.tsx
+++ b/packages/console/src/containers/AppBoundary/index.tsx
@@ -8,7 +8,7 @@ type Props = {
   children: ReactNode;
 };
 
-const AppBoundary = ({ children }: Props) => {
+function AppBoundary({ children }: Props) {
   const {
     data: { language },
   } = useUserPreferences();
@@ -21,6 +21,6 @@ const AppBoundary = ({ children }: Props) => {
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>;
-};
+}
 
 export default AppBoundary;
diff --git a/packages/console/src/containers/AppContent/components/SubMenu/index.tsx b/packages/console/src/containers/AppContent/components/SubMenu/index.tsx
index 2bff9961e..8fb8c1762 100644
--- a/packages/console/src/containers/AppContent/components/SubMenu/index.tsx
+++ b/packages/console/src/containers/AppContent/components/SubMenu/index.tsx
@@ -23,7 +23,7 @@ type Props<T> = {
   onItemClick: (value: T) => void;
 };
 
-const SubMenu = <T extends string>({
+function SubMenu<T extends string>({
   className,
   menuItemClassName,
   icon,
@@ -31,7 +31,7 @@ const SubMenu = <T extends string>({
   options,
   selectedOption,
   onItemClick,
-}: Props<T>) => {
+}: Props<T>) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const anchorRef = useRef<HTMLDivElement>(null);
   const [showMenu, setShowMenu] = useState(false);
@@ -94,6 +94,6 @@ const SubMenu = <T extends string>({
       </div>
     </div>
   );
-};
+}
 
 export default SubMenu;
diff --git a/packages/console/src/containers/AppContent/components/Topbar/index.tsx b/packages/console/src/containers/AppContent/components/Topbar/index.tsx
index c98d07577..3b9547d31 100644
--- a/packages/console/src/containers/AppContent/components/Topbar/index.tsx
+++ b/packages/console/src/containers/AppContent/components/Topbar/index.tsx
@@ -15,7 +15,7 @@ type Props = {
   className?: string;
 };
 
-const Topbar = ({ className }: Props) => {
+function Topbar({ className }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const LogtoLogo = isCloud ? CloudLogo : Logo;
 
@@ -34,6 +34,6 @@ const Topbar = ({ className }: Props) => {
       <UserInfo />
     </div>
   );
-};
+}
 
 export default Topbar;
diff --git a/packages/console/src/containers/AppContent/components/UserInfo/index.tsx b/packages/console/src/containers/AppContent/components/UserInfo/index.tsx
index 8d28cafb4..4804c2364 100644
--- a/packages/console/src/containers/AppContent/components/UserInfo/index.tsx
+++ b/packages/console/src/containers/AppContent/components/UserInfo/index.tsx
@@ -26,7 +26,7 @@ import SubMenu from '../SubMenu';
 import UserInfoSkeleton from '../UserInfoSkeleton';
 import * as styles from './index.module.scss';
 
-const UserInfo = () => {
+function UserInfo() {
   const { signOut } = useLogto();
   const navigate = useNavigate();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -138,6 +138,6 @@ const UserInfo = () => {
       </Dropdown>
     </>
   );
-};
+}
 
 export default UserInfo;
diff --git a/packages/console/src/containers/AppContent/components/UserInfoSkeleton/index.tsx b/packages/console/src/containers/AppContent/components/UserInfoSkeleton/index.tsx
index 7fe819ffe..5ce948b1c 100644
--- a/packages/console/src/containers/AppContent/components/UserInfoSkeleton/index.tsx
+++ b/packages/console/src/containers/AppContent/components/UserInfoSkeleton/index.tsx
@@ -1,9 +1,11 @@
 import * as styles from './index.module.scss';
 
-const UserInfoSkeleton = () => (
-  <div className={styles.container}>
-    <div className={styles.image} />
-  </div>
-);
+function UserInfoSkeleton() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.image} />
+    </div>
+  );
+}
 
 export default UserInfoSkeleton;
diff --git a/packages/console/src/containers/AppContent/index.tsx b/packages/console/src/containers/AppContent/index.tsx
index 0799a70f8..240e3ff00 100644
--- a/packages/console/src/containers/AppContent/index.tsx
+++ b/packages/console/src/containers/AppContent/index.tsx
@@ -19,7 +19,7 @@ import Topbar from './components/Topbar';
 import * as styles from './index.module.scss';
 import { AppContentOutletContext } from './types';
 
-const AppContent = () => {
+function AppContent() {
   const { isAuthenticated, isLoading: isLogtoLoading, error, signIn } = useLogto();
   const href = useHref('/callback');
   const { isLoading: isPreferencesLoading } = useUserPreferences();
@@ -72,6 +72,6 @@ const AppContent = () => {
       {isCloud && <Broadcast />}
     </>
   );
-};
+}
 
 export default AppContent;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/components/Contact/index.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/components/Contact/index.tsx
index 16a8b0328..ae077feec 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/components/Contact/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/components/Contact/index.tsx
@@ -13,7 +13,7 @@ type Props = {
   onCancel?: () => void;
 };
 
-const Contact = ({ isOpen, onCancel }: Props) => {
+function Contact({ isOpen, onCancel }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const contacts = useContacts();
 
@@ -50,6 +50,6 @@ const Contact = ({ isOpen, onCancel }: Props) => {
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default Contact;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.tsx
index 27dd8bd20..475c5ffa5 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   externalLink?: string;
 };
 
-const Item = ({ icon, titleKey, modal, externalLink, isActive = false }: Props) => {
+function Item({ icon, titleKey, modal, externalLink, isActive = false }: Props) {
   const { t } = useTranslation(undefined, {
     keyPrefix: 'admin_console.tabs',
   });
@@ -63,6 +63,6 @@ const Item = ({ icon, titleKey, modal, externalLink, isActive = false }: Props)
       {content}
     </Link>
   );
-};
+}
 
 export default Item;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/components/Section/index.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/components/Section/index.tsx
index 483709487..839f3de71 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/components/Section/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/components/Section/index.tsx
@@ -7,13 +7,13 @@ type Props = {
   children: ReactNode;
 };
 
-const Section = ({ children, title }: Props) => {
+function Section({ children, title }: Props) {
   return (
     <div>
       <div className={styles.title}>{title}</div>
       {children}
     </div>
   );
-};
+}
 
 export default Section;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/BarGraph.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/BarGraph.tsx
index 375d6681c..ec51bf932 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/BarGraph.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/BarGraph.tsx
@@ -1,12 +1,14 @@
 import type { SVGProps } from 'react';
 
-const BarGraph = (props: SVGProps<SVGSVGElement>) => (
-  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18C12.2652 18 12.5196 17.8946 12.7071 17.7071C12.8946 17.5196 13 17.2652 13 17V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6ZM7 12C6.73478 12 6.48043 12.1054 6.29289 12.2929C6.10536 12.4804 6 12.7348 6 13V17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18C7.26522 18 7.51957 17.8946 7.70711 17.7071C7.89464 17.5196 8 17.2652 8 17V13C8 12.7348 7.89464 12.4804 7.70711 12.2929C7.51957 12.1054 7.26522 12 7 12ZM17 10C16.7348 10 16.4804 10.1054 16.2929 10.2929C16.1054 10.4804 16 10.7348 16 11V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V11C18 10.7348 17.8946 10.4804 17.7071 10.2929C17.5196 10.1054 17.2652 10 17 10ZM19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+function BarGraph(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18C12.2652 18 12.5196 17.8946 12.7071 17.7071C12.8946 17.5196 13 17.2652 13 17V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6ZM7 12C6.73478 12 6.48043 12.1054 6.29289 12.2929C6.10536 12.4804 6 12.7348 6 13V17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18C7.26522 18 7.51957 17.8946 7.70711 17.7071C7.89464 17.5196 8 17.2652 8 17V13C8 12.7348 7.89464 12.4804 7.70711 12.2929C7.51957 12.1054 7.26522 12 7 12ZM17 10C16.7348 10 16.4804 10.1054 16.2929 10.2929C16.1054 10.4804 16 10.7348 16 11V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V11C18 10.7348 17.8946 10.4804 17.7071 10.2929C17.5196 10.1054 17.2652 10 17 10ZM19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
 
 export default BarGraph;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Bolt.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Bolt.tsx
index 99fe75ce4..6903a3d6e 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Bolt.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Bolt.tsx
@@ -1,12 +1,14 @@
 import type { SVGProps } from 'react';
 
-const Bolt = (props: SVGProps<SVGSVGElement>) => (
-  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M19.89 9.55004C19.8069 9.38513 19.6797 9.24645 19.5226 9.14937C19.3656 9.05229 19.1847 9.0006 19 9.00004H14V3.00004C14.0107 2.78073 13.949 2.56397 13.8243 2.38324C13.6996 2.20251 13.5188 2.06785 13.31 2.00004C13.1092 1.93399 12.8927 1.93324 12.6914 1.99792C12.4902 2.0626 12.3147 2.18937 12.19 2.36004L4.18998 13.36C4.08975 13.5049 4.02956 13.6737 4.01551 13.8493C4.00147 14.0249 4.03406 14.2011 4.10998 14.36C4.17991 14.5418 4.30137 14.6992 4.45947 14.8129C4.61757 14.9266 4.80543 14.9916 4.99998 15H9.99998V21C10.0001 21.2109 10.067 21.4164 10.1909 21.587C10.3148 21.7576 10.4895 21.8847 10.69 21.95C10.7905 21.9812 10.8948 21.998 11 22C11.1578 22.0005 11.3134 21.9635 11.4542 21.8923C11.595 21.821 11.7169 21.7174 11.81 21.59L19.81 10.59C19.9177 10.4408 19.9822 10.2648 19.9963 10.0813C20.0104 9.8978 19.9736 9.71397 19.89 9.55004ZM12 17.92V14C12 13.7348 11.8946 13.4805 11.7071 13.2929C11.5196 13.1054 11.2652 13 11 13H6.99998L12 6.08004V10C12 10.2653 12.1053 10.5196 12.2929 10.7071C12.4804 10.8947 12.7348 11 13 11H17L12 17.92Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+function Bolt(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M19.89 9.55004C19.8069 9.38513 19.6797 9.24645 19.5226 9.14937C19.3656 9.05229 19.1847 9.0006 19 9.00004H14V3.00004C14.0107 2.78073 13.949 2.56397 13.8243 2.38324C13.6996 2.20251 13.5188 2.06785 13.31 2.00004C13.1092 1.93399 12.8927 1.93324 12.6914 1.99792C12.4902 2.0626 12.3147 2.18937 12.19 2.36004L4.18998 13.36C4.08975 13.5049 4.02956 13.6737 4.01551 13.8493C4.00147 14.0249 4.03406 14.2011 4.10998 14.36C4.17991 14.5418 4.30137 14.6992 4.45947 14.8129C4.61757 14.9266 4.80543 14.9916 4.99998 15H9.99998V21C10.0001 21.2109 10.067 21.4164 10.1909 21.587C10.3148 21.7576 10.4895 21.8847 10.69 21.95C10.7905 21.9812 10.8948 21.998 11 22C11.1578 22.0005 11.3134 21.9635 11.4542 21.8923C11.595 21.821 11.7169 21.7174 11.81 21.59L19.81 10.59C19.9177 10.4408 19.9822 10.2648 19.9963 10.0813C20.0104 9.8978 19.9736 9.71397 19.89 9.55004ZM12 17.92V14C12 13.7348 11.8946 13.4805 11.7071 13.2929C11.5196 13.1054 11.2652 13 11 13H6.99998L12 6.08004V10C12 10.2653 12.1053 10.5196 12.2929 10.7071C12.4804 10.8947 12.7348 11 13 11H17L12 17.92Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
 
 export default Bolt;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Box.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Box.tsx
index 80030aa17..5e1488c04 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Box.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Box.tsx
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 
-const Box = (props: SVGProps<SVGSVGElement>) => {
+function Box(props: SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
@@ -9,6 +9,6 @@ const Box = (props: SVGProps<SVGSVGElement>) => {
       />
     </svg>
   );
-};
+}
 
 export default Box;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Cloud.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Cloud.tsx
index 6e3375e08..dcfbfe4ef 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Cloud.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Cloud.tsx
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 
-const Cloud = (props: SVGProps<SVGSVGElement>) => {
+function Cloud(props: SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
@@ -9,6 +9,6 @@ const Cloud = (props: SVGProps<SVGSVGElement>) => {
       />
     </svg>
   );
-};
+}
 
 export default Cloud;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Connection.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Connection.tsx
index 7c7592b43..d00ff525a 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Connection.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Connection.tsx
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 
-const Connection = (props: SVGProps<SVGSVGElement>) => {
+function Connection(props: SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
@@ -9,6 +9,6 @@ const Connection = (props: SVGProps<SVGSVGElement>) => {
       />
     </svg>
   );
-};
+}
 
 export default Connection;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Contact.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Contact.tsx
index e913eff00..c0d6313b7 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Contact.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Contact.tsx
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 
-const Contact = (props: SVGProps<SVGSVGElement>) => {
+function Contact(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       width="20"
@@ -16,6 +16,6 @@ const Contact = (props: SVGProps<SVGSVGElement>) => {
       />
     </svg>
   );
-};
+}
 
 export default Contact;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Document.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Document.tsx
index d1e0d01e1..2e57bd747 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Document.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Document.tsx
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 
-const Document = (props: SVGProps<SVGSVGElement>) => {
+function Document(props: SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
@@ -9,6 +9,6 @@ const Document = (props: SVGProps<SVGSVGElement>) => {
       />
     </svg>
   );
-};
+}
 
 export default Document;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Gear.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Gear.tsx
index fe4fa1a44..9934863bb 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Gear.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Gear.tsx
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 
-const Gear = (props: SVGProps<SVGSVGElement>) => {
+function Gear(props: SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
@@ -9,6 +9,6 @@ const Gear = (props: SVGProps<SVGSVGElement>) => {
       />
     </svg>
   );
-};
+}
 
 export default Gear;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/List.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/List.tsx
index 95e6204ce..0e4dd8a21 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/List.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/List.tsx
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 
-const List = (props: SVGProps<SVGSVGElement>) => {
+function List(props: SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
@@ -9,6 +9,6 @@ const List = (props: SVGProps<SVGSVGElement>) => {
       />
     </svg>
   );
-};
+}
 
 export default List;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/UserProfile.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/UserProfile.tsx
index f74f60b2e..338b230c5 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/UserProfile.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/UserProfile.tsx
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 
-const UserProfile = (props: SVGProps<SVGSVGElement>) => {
+function UserProfile(props: SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
@@ -9,6 +9,6 @@ const UserProfile = (props: SVGProps<SVGSVGElement>) => {
       />
     </svg>
   );
-};
+}
 
 export default UserProfile;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Web.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Web.tsx
index 8e02d7ac6..e861d3ad0 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/icons/Web.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/icons/Web.tsx
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 
-const Web = (props: SVGProps<SVGSVGElement>) => {
+function Web(props: SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
@@ -9,6 +9,6 @@ const Web = (props: SVGProps<SVGSVGElement>) => {
       />
     </svg>
   );
-};
+}
 
 export default Web;
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx
index 63b7b35bf..ee006b2fd 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/index.tsx
@@ -7,7 +7,7 @@ import { useSidebarMenuItems } from './hook';
 import * as styles from './index.module.scss';
 import { getPath } from './utils';
 
-const Sidebar = () => {
+function Sidebar() {
   const { t } = useTranslation(undefined, {
     keyPrefix: 'admin_console.tab_sections',
   });
@@ -35,7 +35,7 @@ const Sidebar = () => {
       ))}
     </div>
   );
-};
+}
 
 export default Sidebar;
 
diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx
index da4fb3aaa..19386a630 100644
--- a/packages/console/src/containers/ConsoleContent/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/index.tsx
@@ -41,7 +41,7 @@ import type { AppContentOutletContext } from '../AppContent/types';
 import Sidebar from './Sidebar';
 import * as styles from './index.module.scss';
 
-const ConsoleContent = () => {
+function ConsoleContent() {
   const { scrollableContent } = useOutletContext<AppContentOutletContext>();
 
   return (
@@ -117,6 +117,6 @@ const ConsoleContent = () => {
       </div>
     </div>
   );
-};
+}
 
 export default ConsoleContent;
diff --git a/packages/console/src/containers/TenantAppContainer/index.tsx b/packages/console/src/containers/TenantAppContainer/index.tsx
index 045b00ee9..43be03694 100644
--- a/packages/console/src/containers/TenantAppContainer/index.tsx
+++ b/packages/console/src/containers/TenantAppContainer/index.tsx
@@ -7,7 +7,7 @@ import OnboardingApp from '@/onboarding/App';
 import useUserOnboardingData from '@/onboarding/hooks/use-user-onboarding-data';
 import ConsoleApp from '@/pages/Main';
 
-const TenantAppContainer = () => {
+function TenantAppContainer() {
   const { userEndpoint } = useContext(AppEndpointsContext);
   const { isOnboarding, isLoaded } = useUserOnboardingData();
 
@@ -20,6 +20,6 @@ const TenantAppContainer = () => {
   }
 
   return <ConsoleApp />;
-};
+}
 
 export default TenantAppContainer;
diff --git a/packages/console/src/contexts/AppConfirmModalProvider/index.tsx b/packages/console/src/contexts/AppConfirmModalProvider/index.tsx
index 38b1f9250..fc3a86645 100644
--- a/packages/console/src/contexts/AppConfirmModalProvider/index.tsx
+++ b/packages/console/src/contexts/AppConfirmModalProvider/index.tsx
@@ -46,7 +46,7 @@ const defaultModalState: ConfirmModalState = {
   ModalContent: () => null,
 };
 
-const AppConfirmModalProvider = ({ children }: Props) => {
+function AppConfirmModalProvider({ children }: Props) {
   const [modalState, setModalState] = useState<ConfirmModalState>(defaultModalState);
 
   const resolver = useRef<(value: [result: boolean, data?: unknown]) => void>();
@@ -111,6 +111,6 @@ const AppConfirmModalProvider = ({ children }: Props) => {
       </ConfirmModal>
     </AppConfirmModalContext.Provider>
   );
-};
+}
 
 export default AppConfirmModalProvider;
diff --git a/packages/console/src/contexts/AppEndpointsProvider.tsx b/packages/console/src/contexts/AppEndpointsProvider.tsx
index e43c92bc2..e04904b47 100644
--- a/packages/console/src/contexts/AppEndpointsProvider.tsx
+++ b/packages/console/src/contexts/AppEndpointsProvider.tsx
@@ -21,7 +21,7 @@ export type AppEndpoints = {
 
 export const AppEndpointsContext = createContext<AppEndpoints>({});
 
-const AppEndpointsProvider = ({ children }: Props) => {
+function AppEndpointsProvider({ children }: Props) {
   const [endpoints, setEndpoints] = useState<AppEndpoints>({});
   const { currentTenantId } = useContext(TenantsContext);
   const memorizedContext = useMemo(() => endpoints, [endpoints]);
@@ -44,6 +44,6 @@ const AppEndpointsProvider = ({ children }: Props) => {
   return (
     <AppEndpointsContext.Provider value={memorizedContext}>{children}</AppEndpointsContext.Provider>
   );
-};
+}
 
 export default AppEndpointsProvider;
diff --git a/packages/console/src/contexts/AppThemeProvider/index.tsx b/packages/console/src/contexts/AppThemeProvider/index.tsx
index c61f83f06..866dd8d35 100644
--- a/packages/console/src/contexts/AppThemeProvider/index.tsx
+++ b/packages/console/src/contexts/AppThemeProvider/index.tsx
@@ -40,7 +40,7 @@ export const AppThemeContext = createContext<Context>({
   setThemeOverride: noop,
 });
 
-export const AppThemeProvider = ({ children }: Props) => {
+export function AppThemeProvider({ children }: Props) {
   const [theme, setTheme] = useState<Theme>(defaultTheme);
   const [themeOverride, setThemeOverride] = useState<Theme>();
   const [mode, setMode] = useState<AppearanceMode>(defaultAppearanceMode);
@@ -92,4 +92,4 @@ export const AppThemeProvider = ({ children }: Props) => {
   );
 
   return <AppThemeContext.Provider value={context}>{children}</AppThemeContext.Provider>;
-};
+}
diff --git a/packages/console/src/contexts/TenantsProvider.tsx b/packages/console/src/contexts/TenantsProvider.tsx
index d6ae73064..950298f29 100644
--- a/packages/console/src/contexts/TenantsProvider.tsx
+++ b/packages/console/src/contexts/TenantsProvider.tsx
@@ -33,7 +33,7 @@ export const TenantsContext = createContext<Tenants>({
   navigate: noop,
 });
 
-const TenantsProvider = ({ children }: Props) => {
+function TenantsProvider({ children }: Props) {
   const [tenants, setTenants] = useState(initialTenants);
   const [isSettle, setIsSettle] = useState(false);
   const [currentTenantId, setCurrentTenantId] = useState(getUserTenantId());
@@ -54,6 +54,6 @@ const TenantsProvider = ({ children }: Props) => {
   );
 
   return <TenantsContext.Provider value={memorizedContext}>{children}</TenantsContext.Provider>;
-};
+}
 
 export default TenantsProvider;
diff --git a/packages/console/src/icons/ConnectorPlatformIcon.tsx b/packages/console/src/icons/ConnectorPlatformIcon.tsx
index 14d76e939..33a976b6c 100644
--- a/packages/console/src/icons/ConnectorPlatformIcon.tsx
+++ b/packages/console/src/icons/ConnectorPlatformIcon.tsx
@@ -8,7 +8,7 @@ type Props = {
   platform: ConnectorPlatform;
 };
 
-const ConnectorPlatformIcon = ({ platform }: Props) => {
+function ConnectorPlatformIcon({ platform }: Props) {
   if (platform === ConnectorPlatform.Native) {
     return <Native />;
   }
@@ -18,6 +18,6 @@ const ConnectorPlatformIcon = ({ platform }: Props) => {
   }
 
   return <Universal />;
-};
+}
 
 export default ConnectorPlatformIcon;
diff --git a/packages/console/src/mdx-components/DetailsSummary/index.tsx b/packages/console/src/mdx-components/DetailsSummary/index.tsx
index 30aa1a1ae..362d65a81 100644
--- a/packages/console/src/mdx-components/DetailsSummary/index.tsx
+++ b/packages/console/src/mdx-components/DetailsSummary/index.tsx
@@ -13,7 +13,7 @@ type Props = {
   children?: ReactNode[] | ReactNode;
 };
 
-const DetailsSummary = ({ children }: Props) => {
+function DetailsSummary({ children }: Props) {
   const [summary, details] = Array.isArray(children) ? children : [children];
   const [isExpanded, setIsExpanded] = useState(false);
   const [height, setHeight] = useState<Height>(0);
@@ -47,6 +47,6 @@ const DetailsSummary = ({ children }: Props) => {
       </AnimateHeight>
     </div>
   );
-};
+}
 
 export default DetailsSummary;
diff --git a/packages/console/src/mdx-components/Step/index.tsx b/packages/console/src/mdx-components/Step/index.tsx
index b8fc2855d..45e8c0486 100644
--- a/packages/console/src/mdx-components/Step/index.tsx
+++ b/packages/console/src/mdx-components/Step/index.tsx
@@ -28,7 +28,7 @@ type Props = PropsWithChildren<{
   onButtonClick?: () => void;
 }>;
 
-const Step = ({
+function Step({
   children,
   title,
   subtitle,
@@ -39,7 +39,7 @@ const Step = ({
   buttonType = 'outline',
   isLoading,
   onButtonClick,
-}: Props) => {
+}: Props) {
   const [isExpanded, setIsExpanded] = useState(false);
   const isActive = index === activeIndex;
   const isComplete = index < activeIndex;
@@ -105,6 +105,6 @@ const Step = ({
       </div>
     </Card>
   );
-};
+}
 
 export default Step;
diff --git a/packages/console/src/mdx-components/TabItem/index.tsx b/packages/console/src/mdx-components/TabItem/index.tsx
index e8a4bdf58..ce956fd20 100644
--- a/packages/console/src/mdx-components/TabItem/index.tsx
+++ b/packages/console/src/mdx-components/TabItem/index.tsx
@@ -14,12 +14,12 @@ export type Props = {
   label?: string;
 };
 
-const TabItem = ({ children, ...rest }: Props): JSX.Element => {
+function TabItem({ children, ...rest }: Props): JSX.Element {
   return (
     <div role="tabpanel" {...rest}>
       {children}
     </div>
   );
-};
+}
 
 export default TabItem;
diff --git a/packages/console/src/mdx-components/Tabs/index.tsx b/packages/console/src/mdx-components/Tabs/index.tsx
index e14a9b8cf..7e147f013 100644
--- a/packages/console/src/mdx-components/Tabs/index.tsx
+++ b/packages/console/src/mdx-components/Tabs/index.tsx
@@ -22,7 +22,7 @@ function isTabItem(comp: ReactElement): comp is ReactElement<TabItemProps> {
   return comp.props.value !== undefined;
 }
 
-const Tabs = ({ className, children }: Props): JSX.Element => {
+function Tabs({ className, children }: Props): JSX.Element {
   const verifiedChildren = Children.map(children, (child) => {
     if (isValidElement(child) && isTabItem(child)) {
       return child;
@@ -107,6 +107,6 @@ const Tabs = ({ className, children }: Props): JSX.Element => {
       </div>
     </div>
   );
-};
+}
 
 export default Tabs;
diff --git a/packages/console/src/mdx-components/UriInputField/index.tsx b/packages/console/src/mdx-components/UriInputField/index.tsx
index ef58f12a4..54c471eaf 100644
--- a/packages/console/src/mdx-components/UriInputField/index.tsx
+++ b/packages/console/src/mdx-components/UriInputField/index.tsx
@@ -26,7 +26,7 @@ type Props = {
   isSingle?: boolean;
 };
 
-const UriInputField = ({ appId, name, title, isSingle = false }: Props) => {
+function UriInputField({ appId, name, title, isSingle = false }: Props) {
   const methods = useForm<Partial<GuideForm>>();
   const {
     control,
@@ -138,6 +138,6 @@ const UriInputField = ({ appId, name, title, isSingle = false }: Props) => {
       </form>
     </FormProvider>
   );
-};
+}
 
 export default UriInputField;
diff --git a/packages/console/src/onboarding/App.tsx b/packages/console/src/onboarding/App.tsx
index abc71dccf..097124ec7 100644
--- a/packages/console/src/onboarding/App.tsx
+++ b/packages/console/src/onboarding/App.tsx
@@ -23,7 +23,7 @@ import { getOnboardingPage } from './utils';
 
 const welcomePathname = getOnboardingPage(OnboardingPage.Welcome);
 
-const App = () => {
+function App() {
   const swrOptions = useSwrOptions();
   const { setThemeOverride } = useContext(AppThemeContext);
 
@@ -77,6 +77,6 @@ const App = () => {
       </div>
     </BrowserRouter>
   );
-};
+}
 
 export default App;
diff --git a/packages/console/src/onboarding/components/ActionBar/index.tsx b/packages/console/src/onboarding/components/ActionBar/index.tsx
index daaaa9ea3..3b6dcd47b 100644
--- a/packages/console/src/onboarding/components/ActionBar/index.tsx
+++ b/packages/console/src/onboarding/components/ActionBar/index.tsx
@@ -10,11 +10,13 @@ type Props = {
 
 const totalSteps = 3;
 
-const ActionBar = ({ step, children }: Props) => (
-  <div className={styles.container}>
-    <ProgressBar currentStep={step} totalSteps={totalSteps} />
-    <div className={styles.actions}>{children}</div>
-  </div>
-);
+function ActionBar({ step, children }: Props) {
+  return (
+    <div className={styles.container}>
+      <ProgressBar currentStep={step} totalSteps={totalSteps} />
+      <div className={styles.actions}>{children}</div>
+    </div>
+  );
+}
 
 export default ActionBar;
diff --git a/packages/console/src/onboarding/components/Broadcast/index.tsx b/packages/console/src/onboarding/components/Broadcast/index.tsx
index f0c387cd7..8d9d3208a 100644
--- a/packages/console/src/onboarding/components/Broadcast/index.tsx
+++ b/packages/console/src/onboarding/components/Broadcast/index.tsx
@@ -5,7 +5,7 @@ import { aboutCloudPreviewLink } from '@/onboarding/constants';
 
 import * as styles from './index.module.scss';
 
-const Broadcast = () => {
+function Broadcast() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -16,6 +16,6 @@ const Broadcast = () => {
       </TextLink>
     </div>
   );
-};
+}
 
 export default Broadcast;
diff --git a/packages/console/src/onboarding/components/CardSelector/CardSelector.tsx b/packages/console/src/onboarding/components/CardSelector/CardSelector.tsx
index 52b45d559..4b2b25ad2 100644
--- a/packages/console/src/onboarding/components/CardSelector/CardSelector.tsx
+++ b/packages/console/src/onboarding/components/CardSelector/CardSelector.tsx
@@ -10,18 +10,20 @@ type Props = {
   optionClassName?: string;
 };
 
-const CardSelector = ({ name, value, options, onChange, optionClassName }: Props) => (
-  <RadioGroup type="compact" value={value} name={name} onChange={onChange}>
-    {options.map(({ value: optionValue, title, icon }) => (
-      <Radio
-        key={optionValue}
-        icon={icon}
-        title={title}
-        value={optionValue}
-        className={optionClassName}
-      />
-    ))}
-  </RadioGroup>
-);
+function CardSelector({ name, value, options, onChange, optionClassName }: Props) {
+  return (
+    <RadioGroup type="compact" value={value} name={name} onChange={onChange}>
+      {options.map(({ value: optionValue, title, icon }) => (
+        <Radio
+          key={optionValue}
+          icon={icon}
+          title={title}
+          value={optionValue}
+          className={optionClassName}
+        />
+      ))}
+    </RadioGroup>
+  );
+}
 
 export default CardSelector;
diff --git a/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/CardItem.tsx b/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/CardItem.tsx
index c42d2db35..689518765 100644
--- a/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/CardItem.tsx
+++ b/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/CardItem.tsx
@@ -15,12 +15,12 @@ type Props = {
   className?: string;
 };
 
-const CardItem = ({
+function CardItem({
   option: { icon, title, value, tag, trailingTag, isDisabled, disabledTip },
   isSelected,
   onClick,
   className,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -61,6 +61,6 @@ const CardItem = ({
       </div>
     </Tooltip>
   );
-};
+}
 
 export default CardItem;
diff --git a/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/index.tsx b/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/index.tsx
index 0dff4ba74..a181a8b8a 100644
--- a/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/index.tsx
+++ b/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/index.tsx
@@ -13,14 +13,14 @@ type Props = {
   optionClassName?: string;
 };
 
-const MultiCardSelector = ({
+function MultiCardSelector({
   options,
   value: selectedValues,
   onChange,
   isNotAllowEmpty = false,
   className,
   optionClassName,
-}: Props) => {
+}: Props) {
   const onToggle = (value: string) => {
     if (selectedValues.includes(value) && selectedValues.length === 1 && isNotAllowEmpty) {
       return;
@@ -46,6 +46,6 @@ const MultiCardSelector = ({
       ))}
     </div>
   );
-};
+}
 
 export default MultiCardSelector;
diff --git a/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx b/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx
index d8713d7ba..64670a94e 100644
--- a/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx
+++ b/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx
@@ -4,10 +4,10 @@ import Alert from '@/components/Alert';
 
 import * as styles from './index.module.scss';
 
-const DemoConnectorNotice = () => {
+function DemoConnectorNotice() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return <Alert className={styles.notice}>{t('cloud.sie.connectors.notice')}</Alert>;
-};
+}
 
 export default DemoConnectorNotice;
diff --git a/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.tsx b/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.tsx
index ed14ae398..511835b96 100644
--- a/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.tsx
+++ b/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.tsx
@@ -12,7 +12,7 @@ type Props = {
   onClose: () => void;
 };
 
-const GiftModal = ({ isOpen, onClose }: Props) => {
+function GiftModal({ isOpen, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -38,6 +38,6 @@ const GiftModal = ({ isOpen, onClose }: Props) => {
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default GiftModal;
diff --git a/packages/console/src/onboarding/components/EarlyBirdGift/index.tsx b/packages/console/src/onboarding/components/EarlyBirdGift/index.tsx
index c77f0979b..d9700de01 100644
--- a/packages/console/src/onboarding/components/EarlyBirdGift/index.tsx
+++ b/packages/console/src/onboarding/components/EarlyBirdGift/index.tsx
@@ -5,7 +5,7 @@ import IconButton from '@/components/IconButton';
 
 import GiftModal from './GiftModal';
 
-const EarlyBirdGift = () => {
+function EarlyBirdGift() {
   const [isGiftOpen, setIsGiftOpen] = useState(false);
 
   return (
@@ -26,6 +26,6 @@ const EarlyBirdGift = () => {
       />
     </>
   );
-};
+}
 
 export default EarlyBirdGift;
diff --git a/packages/console/src/onboarding/components/ProgressBar/index.tsx b/packages/console/src/onboarding/components/ProgressBar/index.tsx
index 7d99bdfe9..0aeed2913 100644
--- a/packages/console/src/onboarding/components/ProgressBar/index.tsx
+++ b/packages/console/src/onboarding/components/ProgressBar/index.tsx
@@ -7,15 +7,17 @@ type Props = {
   totalSteps: number;
 };
 
-const ProgressBar = ({ currentStep, totalSteps }: Props) => (
-  <div className={styles.progressBar}>
-    {Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => (
-      <div
-        key={step}
-        className={classNames(styles.stepIndicator, step <= currentStep && styles.active)}
-      />
-    ))}
-  </div>
-);
+function ProgressBar({ currentStep, totalSteps }: Props) {
+  return (
+    <div className={styles.progressBar}>
+      {Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => (
+        <div
+          key={step}
+          className={classNames(styles.stepIndicator, step <= currentStep && styles.active)}
+        />
+      ))}
+    </div>
+  );
+}
 
 export default ProgressBar;
diff --git a/packages/console/src/onboarding/components/Reservation/index.tsx b/packages/console/src/onboarding/components/Reservation/index.tsx
index 0bbf2d768..e61f9581b 100644
--- a/packages/console/src/onboarding/components/Reservation/index.tsx
+++ b/packages/console/src/onboarding/components/Reservation/index.tsx
@@ -18,13 +18,13 @@ type Props = {
   className?: string;
 };
 
-const Reservation = ({
+function Reservation({
   title,
   description,
   reservationButtonTitle,
   reservationButtonIcon,
   className,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -51,6 +51,6 @@ const Reservation = ({
       />
     </div>
   );
-};
+}
 
 export default Reservation;
diff --git a/packages/console/src/onboarding/components/Topbar/index.tsx b/packages/console/src/onboarding/components/Topbar/index.tsx
index 84cac5d41..07c7de8e6 100644
--- a/packages/console/src/onboarding/components/Topbar/index.tsx
+++ b/packages/console/src/onboarding/components/Topbar/index.tsx
@@ -2,10 +2,12 @@ import CloudLogo from '@/assets/images/cloud-logo.svg';
 
 import * as styles from './index.module.scss';
 
-const Topbar = () => (
-  <div className={styles.topbar}>
-    <CloudLogo className={styles.logo} />
-  </div>
-);
+function Topbar() {
+  return (
+    <div className={styles.topbar}>
+      <CloudLogo className={styles.logo} />
+    </div>
+  );
+}
 
 export default Topbar;
diff --git a/packages/console/src/onboarding/containers/AppContent/index.tsx b/packages/console/src/onboarding/containers/AppContent/index.tsx
index 767f1a678..c31d7aa07 100644
--- a/packages/console/src/onboarding/containers/AppContent/index.tsx
+++ b/packages/console/src/onboarding/containers/AppContent/index.tsx
@@ -4,13 +4,15 @@ import Topbar from '@/onboarding/components/Topbar';
 
 import * as styles from './index.module.scss';
 
-const AppContent = () => (
-  <div className={styles.app}>
-    <Topbar />
-    <div className={styles.content}>
-      <Outlet />
+function AppContent() {
+  return (
+    <div className={styles.app}>
+      <Topbar />
+      <div className={styles.content}>
+        <Outlet />
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default AppContent;
diff --git a/packages/console/src/onboarding/pages/About/index.tsx b/packages/console/src/onboarding/pages/About/index.tsx
index 826f15392..8aad59261 100644
--- a/packages/console/src/onboarding/pages/About/index.tsx
+++ b/packages/console/src/onboarding/pages/About/index.tsx
@@ -21,7 +21,6 @@ import { getOnboardingPage } from '../../utils';
 import * as styles from './index.module.scss';
 import { titleOptions, companySizeOptions, reasonOptions } from './options';
 
-// eslint-disable-next-line react/function-component-definition
 function About() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
diff --git a/packages/console/src/onboarding/pages/Congrats/index.tsx b/packages/console/src/onboarding/pages/Congrats/index.tsx
index edaa2f347..a25d706f5 100644
--- a/packages/console/src/onboarding/pages/Congrats/index.tsx
+++ b/packages/console/src/onboarding/pages/Congrats/index.tsx
@@ -15,7 +15,6 @@ import { withAppInsights } from '@/utils/app-insights';
 
 import * as styles from './index.module.scss';
 
-// eslint-disable-next-line react/function-component-definition
 function Congrats() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { update } = useUserOnboardingData();
diff --git a/packages/console/src/onboarding/pages/SignInExperience/components/InspireMe/index.tsx b/packages/console/src/onboarding/pages/SignInExperience/components/InspireMe/index.tsx
index a2189ac22..40a7b6115 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/components/InspireMe/index.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/components/InspireMe/index.tsx
@@ -15,7 +15,7 @@ type Props = {
   onInspired: (template: OnboardingSieConfig) => void;
 };
 
-const InspireMe = ({ onInspired }: Props) => {
+function InspireMe({ onInspired }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [isButtonHover, setIsButtonHover] = useState(false);
   const BulbIcon = isButtonHover ? LightBulb : Bulb;
@@ -57,6 +57,6 @@ const InspireMe = ({ onInspired }: Props) => {
       />
     </div>
   );
-};
+}
 
 export default InspireMe;
diff --git a/packages/console/src/onboarding/pages/SignInExperience/components/PlatformTabs/PlatformTab.tsx b/packages/console/src/onboarding/pages/SignInExperience/components/PlatformTabs/PlatformTab.tsx
index e4763fd62..87b54e601 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/components/PlatformTabs/PlatformTab.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/components/PlatformTabs/PlatformTab.tsx
@@ -16,7 +16,7 @@ type Props = {
   onClick: (tab: PreviewPlatform) => void;
 };
 
-const PlatformTab = ({ isSelected, icon, title, tab, onClick }: Props) => {
+function PlatformTab({ isSelected, icon, title, tab, onClick }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -35,6 +35,6 @@ const PlatformTab = ({ isSelected, icon, title, tab, onClick }: Props) => {
       {t(title)}
     </div>
   );
-};
+}
 
 export default PlatformTab;
diff --git a/packages/console/src/onboarding/pages/SignInExperience/components/PlatformTabs/index.tsx b/packages/console/src/onboarding/pages/SignInExperience/components/PlatformTabs/index.tsx
index dea934557..fbc9b15ed 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/components/PlatformTabs/index.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/components/PlatformTabs/index.tsx
@@ -10,23 +10,25 @@ type Props = {
   onSelect: (tab: PreviewPlatform) => void;
 };
 
-const PlatformTabs = ({ currentTab, onSelect }: Props) => (
-  <div className={styles.container}>
-    <PlatformTab
-      icon={<Web />}
-      title="cloud.sie.preview.web_tab"
-      tab={PreviewPlatform.DesktopWeb}
-      isSelected={currentTab === PreviewPlatform.DesktopWeb}
-      onClick={onSelect}
-    />
-    <PlatformTab
-      icon={<Native />}
-      title="cloud.sie.preview.mobile_tab"
-      tab={PreviewPlatform.MobileWeb}
-      isSelected={currentTab === PreviewPlatform.MobileWeb}
-      onClick={onSelect}
-    />
-  </div>
-);
+function PlatformTabs({ currentTab, onSelect }: Props) {
+  return (
+    <div className={styles.container}>
+      <PlatformTab
+        icon={<Web />}
+        title="cloud.sie.preview.web_tab"
+        tab={PreviewPlatform.DesktopWeb}
+        isSelected={currentTab === PreviewPlatform.DesktopWeb}
+        onClick={onSelect}
+      />
+      <PlatformTab
+        icon={<Native />}
+        title="cloud.sie.preview.mobile_tab"
+        tab={PreviewPlatform.MobileWeb}
+        isSelected={currentTab === PreviewPlatform.MobileWeb}
+        onClick={onSelect}
+      />
+    </div>
+  );
+}
 
 export default PlatformTabs;
diff --git a/packages/console/src/onboarding/pages/SignInExperience/components/Preview/index.tsx b/packages/console/src/onboarding/pages/SignInExperience/components/Preview/index.tsx
index 38bed5172..1a53ce163 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/components/Preview/index.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/components/Preview/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   className?: string;
 };
 
-const Preview = ({ signInExperience, isLivePreviewDisabled = false, className }: Props) => {
+function Preview({ signInExperience, isLivePreviewDisabled = false, className }: Props) {
   const [currentTab, setCurrentTab] = useState(PreviewPlatform.DesktopWeb);
 
   return (
@@ -32,6 +32,6 @@ const Preview = ({ signInExperience, isLivePreviewDisabled = false, className }:
       />
     </div>
   );
-};
+}
 
 export default Preview;
diff --git a/packages/console/src/onboarding/pages/SignInExperience/components/Skeleton/index.tsx b/packages/console/src/onboarding/pages/SignInExperience/components/Skeleton/index.tsx
index b083e0b86..8e667e048 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/components/Skeleton/index.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/components/Skeleton/index.tsx
@@ -3,7 +3,7 @@ import * as pageLayout from '@/onboarding/scss/layout.module.scss';
 import * as sieLayout from '../../index.module.scss';
 import * as styles from './index.module.scss';
 
-const Skeleton = () => {
+function Skeleton() {
   return (
     <div className={pageLayout.page}>
       <div className={pageLayout.contentContainer}>
@@ -39,6 +39,6 @@ const Skeleton = () => {
       </div>
     </div>
   );
-};
+}
 
 export default Skeleton;
diff --git a/packages/console/src/onboarding/pages/SignInExperience/components/SocialSelector/index.tsx b/packages/console/src/onboarding/pages/SignInExperience/components/SocialSelector/index.tsx
index f96fd6b73..9821580d2 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/components/SocialSelector/index.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/components/SocialSelector/index.tsx
@@ -14,7 +14,7 @@ type Props = {
   onChange: (value: string[]) => void;
 };
 
-const SocialSelector = ({ value, onChange }: Props) => {
+function SocialSelector({ value, onChange }: Props) {
   const { data: connectorData, error } = useConnectorGroups();
 
   if (!connectorData || error) {
@@ -43,6 +43,6 @@ const SocialSelector = ({ value, onChange }: Props) => {
       onChange={onChange}
     />
   );
-};
+}
 
 export default SocialSelector;
diff --git a/packages/console/src/onboarding/pages/SignInExperience/index.tsx b/packages/console/src/onboarding/pages/SignInExperience/index.tsx
index 5c903a27f..5ca9fecd6 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/index.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/index.tsx
@@ -36,7 +36,6 @@ import { authenticationOptions, identifierOptions } from './options';
 import { defaultOnboardingSieConfig } from './sie-config-templates';
 import { parser } from './utils';
 
-// eslint-disable-next-line react/function-component-definition
 function SignInExperience() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
diff --git a/packages/console/src/onboarding/pages/Welcome/index.tsx b/packages/console/src/onboarding/pages/Welcome/index.tsx
index 3cd8443fa..ce1acf4f4 100644
--- a/packages/console/src/onboarding/pages/Welcome/index.tsx
+++ b/packages/console/src/onboarding/pages/Welcome/index.tsx
@@ -20,7 +20,6 @@ import { getOnboardingPage } from '../../utils';
 import * as styles from './index.module.scss';
 import { deploymentTypeOptions, projectOptions } from './options';
 
-// eslint-disable-next-line react/function-component-definition
 function Welcome() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
diff --git a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx b/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
index 737bf15b7..f8497595a 100644
--- a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
@@ -18,7 +18,7 @@ type Props = {
 
 type CreatePermissionFormData = Pick<Scope, 'name' | 'description'>;
 
-const CreatePermissionModal = ({ resourceId, onClose }: Props) => {
+function CreatePermissionModal({ resourceId, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     handleSubmit,
@@ -94,6 +94,6 @@ const CreatePermissionModal = ({ resourceId, onClose }: Props) => {
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default CreatePermissionModal;
diff --git a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/index.tsx b/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/index.tsx
index a325b4805..f2b68d4db 100644
--- a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/index.tsx
@@ -19,7 +19,7 @@ import CreatePermissionModal from './components/CreatePermissionModal';
 
 const pageSize = defaultPageSize;
 
-const ApiResourcePermissions = () => {
+function ApiResourcePermissions() {
   const {
     resource: { id: resourceId },
     isLogtoManagementApiResource,
@@ -133,6 +133,6 @@ const ApiResourcePermissions = () => {
       )}
     </>
   );
-};
+}
 
 export default ApiResourcePermissions;
diff --git a/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx b/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx
index c1a34ceae..923c39fd0 100644
--- a/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx
@@ -14,7 +14,7 @@ import useDocumentationUrl from '@/hooks/use-documentation-url';
 
 import type { ApiResourceDetailsOutletContext } from '../types';
 
-const ApiResourceSettings = () => {
+function ApiResourceSettings() {
   const { resource, isDeleting, isLogtoManagementApiResource, onResourceUpdated } =
     useOutletContext<ApiResourceDetailsOutletContext>();
 
@@ -78,6 +78,6 @@ const ApiResourceSettings = () => {
       <UnsavedChangesAlertModal hasUnsavedChanges={!isDeleting && isDirty} />
     </>
   );
-};
+}
 
 export default ApiResourceSettings;
diff --git a/packages/console/src/pages/ApiResourceDetails/index.tsx b/packages/console/src/pages/ApiResourceDetails/index.tsx
index 3a600fe85..801b61eab 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/index.tsx
@@ -30,7 +30,6 @@ import { withAppInsights } from '@/utils/app-insights';
 import * as styles from './index.module.scss';
 import { ApiResourceDetailsOutletContext } from './types';
 
-// eslint-disable-next-line react/function-component-definition
 function ApiResourceDetails() {
   const { pathname } = useLocation();
   const { id } = useParams();
diff --git a/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx b/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
index d6738d722..e05dd13ff 100644
--- a/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
@@ -18,7 +18,7 @@ type Props = {
   onClose?: (createdApiResource?: Resource) => void;
 };
 
-const CreateForm = ({ onClose }: Props) => {
+function CreateForm({ onClose }: Props) {
   const {
     handleSubmit,
     register,
@@ -89,6 +89,6 @@ const CreateForm = ({ onClose }: Props) => {
       </form>
     </ModalLayout>
   );
-};
+}
 
 export default CreateForm;
diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx
index 88810b73d..1a4cc2755 100644
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/packages/console/src/pages/ApiResources/index.tsx
@@ -35,7 +35,6 @@ const createApiResourcePathname = `${apiResourcesPathname}/create`;
 const buildDetailsPathname = (id: string) =>
   `${apiResourcesPathname}/${id}/${ApiResourceDetailsTabs.Settings}`;
 
-// eslint-disable-next-line react/function-component-definition
 function ApiResources() {
   const { pathname, search } = useLocation();
   const isCreateNew = pathname.endsWith('/create');
diff --git a/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx b/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx
index 79fa48913..11b45843c 100644
--- a/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx
@@ -16,7 +16,7 @@ type Props = {
   oidcConfig: SnakeCaseOidcConfig;
 };
 
-const AdvancedSettings = ({ applicationType, oidcConfig }: Props) => {
+function AdvancedSettings({ applicationType, oidcConfig }: Props) {
   const { control } = useFormContext<Application & { isAdmin: boolean }>();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -83,6 +83,6 @@ const AdvancedSettings = ({ applicationType, oidcConfig }: Props) => {
       )}
     </FormCard>
   );
-};
+}
 
 export default AdvancedSettings;
diff --git a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
index 27abc48d1..154579d52 100644
--- a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
@@ -20,7 +20,7 @@ type Props = {
   data: Application;
 };
 
-const Settings = ({ data }: Props) => {
+function Settings({ data }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { getDocumentationUrl } = useDocumentationUrl();
   const {
@@ -193,6 +193,6 @@ const Settings = ({ data }: Props) => {
       )}
     </FormCard>
   );
-};
+}
 
 export default Settings;
diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx
index 9f168673f..da3f90ec0 100644
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/index.tsx
@@ -42,7 +42,6 @@ const mapToUriFormatArrays = (value?: string[]) =>
 const mapToUriOriginFormatArrays = (value?: string[]) =>
   value?.filter(Boolean).map((uri) => decodeURIComponent(new URL(uri).origin));
 
-// eslint-disable-next-line react/function-component-definition
 function ApplicationDetails() {
   const { id } = useParams();
   const { pathname } = useLocation();
diff --git a/packages/console/src/pages/Applications/components/ApplicationsPlaceholder/index.tsx b/packages/console/src/pages/Applications/components/ApplicationsPlaceholder/index.tsx
index 161058958..ac24094c1 100644
--- a/packages/console/src/pages/Applications/components/ApplicationsPlaceholder/index.tsx
+++ b/packages/console/src/pages/Applications/components/ApplicationsPlaceholder/index.tsx
@@ -18,7 +18,7 @@ type Props = {
   onCreate: (createdApp: Application) => void;
 };
 
-const ApplicationsPlaceholder = ({ onCreate }: Props) => {
+function ApplicationsPlaceholder({ onCreate }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [isCreating, setIsCreating] = useState(false);
   const api = useApi();
@@ -77,6 +77,6 @@ const ApplicationsPlaceholder = ({ onCreate }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default ApplicationsPlaceholder;
diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
index 3d3038bf1..54ba8cde8 100644
--- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
@@ -29,7 +29,7 @@ type Props = {
   onClose?: (createdApp?: Application) => void;
 };
 
-const CreateForm = ({ isOpen, onClose }: Props) => {
+function CreateForm({ isOpen, onClose }: Props) {
   const { updateConfigs } = useConfigs();
   const {
     handleSubmit,
@@ -130,6 +130,6 @@ const CreateForm = ({ isOpen, onClose }: Props) => {
       </ModalLayout>
     </Modal>
   );
-};
+}
 
 export default CreateForm;
diff --git a/packages/console/src/pages/Applications/components/Guide/GuideModal.tsx b/packages/console/src/pages/Applications/components/Guide/GuideModal.tsx
index dba931f93..8bc86164f 100644
--- a/packages/console/src/pages/Applications/components/Guide/GuideModal.tsx
+++ b/packages/console/src/pages/Applications/components/Guide/GuideModal.tsx
@@ -10,7 +10,7 @@ type Props = {
   onClose: (id: string) => void;
 };
 
-const GuideModal = ({ app, onClose }: Props) => {
+function GuideModal({ app, onClose }: Props) {
   if (!app) {
     return null;
   }
@@ -29,6 +29,6 @@ const GuideModal = ({ app, onClose }: Props) => {
       <Guide app={app} onClose={closeModal} />
     </Modal>
   );
-};
+}
 
 export default GuideModal;
diff --git a/packages/console/src/pages/Applications/components/Guide/index.tsx b/packages/console/src/pages/Applications/components/Guide/index.tsx
index a0416bb33..94a5702c3 100644
--- a/packages/console/src/pages/Applications/components/Guide/index.tsx
+++ b/packages/console/src/pages/Applications/components/Guide/index.tsx
@@ -49,7 +49,7 @@ const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Elemen
   'go_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/go_zh-cn.mdx')),
 };
 
-const Guide = ({ app, isCompact, onClose }: Props) => {
+function Guide({ app, isCompact, onClose }: Props) {
   const sdks = app && applicationTypeAndSdkTypeMappings[app.type];
   const [selectedSdk, setSelectedSdk] = useState<Optional<SupportedSdk>>();
   const [activeStepIndex, setActiveStepIndex] = useState(-1);
@@ -127,6 +127,6 @@ const Guide = ({ app, isCompact, onClose }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default Guide;
diff --git a/packages/console/src/pages/Applications/components/GuideHeader/index.tsx b/packages/console/src/pages/Applications/components/GuideHeader/index.tsx
index 1b4a9d5c0..9a5412b63 100644
--- a/packages/console/src/pages/Applications/components/GuideHeader/index.tsx
+++ b/packages/console/src/pages/Applications/components/GuideHeader/index.tsx
@@ -61,7 +61,7 @@ const getSampleProjectUrl = (sdk: SupportedSdk) => {
   }
 };
 
-const GuideHeader = ({ appName, selectedSdk, isCompact = false, onClose }: Props) => {
+function GuideHeader({ appName, selectedSdk, isCompact = false, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const onClickGetSample = () => {
@@ -116,6 +116,6 @@ const GuideHeader = ({ appName, selectedSdk, isCompact = false, onClose }: Props
       )}
     </div>
   );
-};
+}
 
 export default GuideHeader;
diff --git a/packages/console/src/pages/Applications/components/SdkSelector/index.tsx b/packages/console/src/pages/Applications/components/SdkSelector/index.tsx
index 5b3689105..eb00aa052 100644
--- a/packages/console/src/pages/Applications/components/SdkSelector/index.tsx
+++ b/packages/console/src/pages/Applications/components/SdkSelector/index.tsx
@@ -26,14 +26,14 @@ type Props = {
   onToggle?: () => void;
 };
 
-const SdkSelector = ({
+function SdkSelector({
   className,
   sdks,
   selectedSdk,
   isCompact = false,
   onChange,
   onToggle,
-}: Props) => {
+}: Props) {
   const [isFolded, setIsFolded] = useState(isCompact);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
@@ -94,6 +94,6 @@ const SdkSelector = ({
       </div>
     </Card>
   );
-};
+}
 
 export default SdkSelector;
diff --git a/packages/console/src/pages/Applications/components/StepsSkeleton/index.tsx b/packages/console/src/pages/Applications/components/StepsSkeleton/index.tsx
index 23797e019..7d3ed4e75 100644
--- a/packages/console/src/pages/Applications/components/StepsSkeleton/index.tsx
+++ b/packages/console/src/pages/Applications/components/StepsSkeleton/index.tsx
@@ -1,18 +1,20 @@
 import * as styles from './index.module.scss';
 
-const StepsSkeleton = () => (
-  <>
-    {Array.from({ length: 5 }).map((_, stepIndex) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <div key={stepIndex} className={styles.step}>
-        <div className={styles.index} />
-        <div className={styles.wrapper}>
-          <div className={styles.title} />
-          <div className={styles.subtitle} />
+function StepsSkeleton() {
+  return (
+    <>
+      {Array.from({ length: 5 }).map((_, stepIndex) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div key={stepIndex} className={styles.step}>
+          <div className={styles.index} />
+          <div className={styles.wrapper}>
+            <div className={styles.title} />
+            <div className={styles.subtitle} />
+          </div>
         </div>
-      </div>
-    ))}
-  </>
-);
+      ))}
+    </>
+  );
+}
 
 export default StepsSkeleton;
diff --git a/packages/console/src/pages/Applications/components/TypeDescription/index.tsx b/packages/console/src/pages/Applications/components/TypeDescription/index.tsx
index 62325a136..9be369ee9 100644
--- a/packages/console/src/pages/Applications/components/TypeDescription/index.tsx
+++ b/packages/console/src/pages/Applications/components/TypeDescription/index.tsx
@@ -13,13 +13,15 @@ type Props = {
   size?: 'large' | 'small';
 };
 
-const TypeDescription = ({ title, subtitle, description, type, size = 'large' }: Props) => (
-  <div className={classNames(styles.container, styles[size])}>
-    <ApplicationIcon type={type} />
-    <div className={styles.title}>{title}</div>
-    <div className={styles.subtitle}>{subtitle}</div>
-    <div className={styles.description}>{description}</div>
-  </div>
-);
+function TypeDescription({ title, subtitle, description, type, size = 'large' }: Props) {
+  return (
+    <div className={classNames(styles.container, styles[size])}>
+      <ApplicationIcon type={type} />
+      <div className={styles.title}>{title}</div>
+      <div className={styles.subtitle}>{subtitle}</div>
+      <div className={styles.description}>{description}</div>
+    </div>
+  );
+}
 
 export default TypeDescription;
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index 294b7e286..99873fd17 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -37,7 +37,6 @@ const buildNavigatePathPostAppCreation = ({ type, id }: Application) => {
   return build(id);
 };
 
-// eslint-disable-next-line react/function-component-definition
 function Applications() {
   const navigate = useNavigate();
   const { pathname, search } = useLocation();
diff --git a/packages/console/src/pages/AuditLogDetails/components/EventIcon/index.tsx b/packages/console/src/pages/AuditLogDetails/components/EventIcon/index.tsx
index b964aeded..ea9fc8f81 100644
--- a/packages/console/src/pages/AuditLogDetails/components/EventIcon/index.tsx
+++ b/packages/console/src/pages/AuditLogDetails/components/EventIcon/index.tsx
@@ -9,7 +9,7 @@ type Props = {
   isSuccess: boolean;
 };
 
-const EventIcon = ({ isSuccess }: Props) => {
+function EventIcon({ isSuccess }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -22,6 +22,6 @@ const EventIcon = ({ isSuccess }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default EventIcon;
diff --git a/packages/console/src/pages/AuditLogDetails/index.tsx b/packages/console/src/pages/AuditLogDetails/index.tsx
index 812b43f9b..954b6a551 100644
--- a/packages/console/src/pages/AuditLogDetails/index.tsx
+++ b/packages/console/src/pages/AuditLogDetails/index.tsx
@@ -29,7 +29,6 @@ const getAuditLogDetailsRelatedResourceLink = (pathname: string) =>
 const getDetailsTabNavLink = (logId: string, userId?: string) =>
   userId ? `/users/${userId}/logs/${logId}` : `/audit-logs/${logId}`;
 
-// eslint-disable-next-line react/function-component-definition
 function AuditLogDetails() {
   const { id, logId } = useParams();
   const { pathname } = useLocation();
diff --git a/packages/console/src/pages/AuditLogs/index.tsx b/packages/console/src/pages/AuditLogs/index.tsx
index 8aab8c223..bba8e9a68 100644
--- a/packages/console/src/pages/AuditLogs/index.tsx
+++ b/packages/console/src/pages/AuditLogs/index.tsx
@@ -3,7 +3,6 @@ import CardTitle from '@/components/CardTitle';
 import * as resourcesStyles from '@/scss/resources.module.scss';
 import { withAppInsights } from '@/utils/app-insights';
 
-// eslint-disable-next-line react/function-component-definition
 function AuditLogs() {
   return (
     <div className={resourcesStyles.container}>
diff --git a/packages/console/src/pages/Callback/index.tsx b/packages/console/src/pages/Callback/index.tsx
index d18f754c4..4d877c9e5 100644
--- a/packages/console/src/pages/Callback/index.tsx
+++ b/packages/console/src/pages/Callback/index.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import AppError from '@/components/AppError';
 import AppLoading from '@/components/AppLoading';
 
-const Callback = () => {
+function Callback() {
   const navigate = useNavigate();
   const { error } = useHandleSignInCallback(() => {
     navigate('/');
@@ -24,6 +24,6 @@ const Callback = () => {
   }
 
   return <AppLoading />;
-};
+}
 
 export default Callback;
diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx
index 6347830fb..e1927bde2 100644
--- a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx
@@ -35,7 +35,7 @@ const getConnectorTarget = (connectorData: ConnectorResponse): Optional<string>
   );
 };
 
-const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Props) => {
+function ConnectorContent({ isDeleted, connectorData, onConnectorUpdated }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { getDocumentationUrl } = useDocumentationUrl();
   const api = useApi();
@@ -147,6 +147,6 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop
       <UnsavedChangesAlertModal hasUnsavedChanges={!isDeleted && isDirty} />
     </FormProvider>
   );
-};
+}
 
 export default ConnectorContent;
diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx
index 5d8a5d17f..ea52eafa2 100644
--- a/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   connectorId: string;
 };
 
-const ConnectorTabs = ({ target, connectorId }: Props) => {
+function ConnectorTabs({ target, connectorId }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data: connectors } = useSWR<ConnectorResponse[]>(`api/connectors?target=${target}`);
 
@@ -54,6 +54,6 @@ const ConnectorTabs = ({ target, connectorId }: Props) => {
       ))}
     </div>
   );
-};
+}
 
 export default ConnectorTabs;
diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorTypeName/index.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorTypeName/index.tsx
index 025c037b4..0401d400c 100644
--- a/packages/console/src/pages/ConnectorDetails/components/ConnectorTypeName/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorTypeName/index.tsx
@@ -7,7 +7,7 @@ type Props = {
   type: ConnectorType;
 };
 
-const ConnectorTypeName = ({ type }: Props) => {
+function ConnectorTypeName({ type }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -17,6 +17,6 @@ const ConnectorTypeName = ({ type }: Props) => {
       {type === ConnectorType.Social && t('connector_details.type_social')}
     </div>
   );
-};
+}
 
 export default ConnectorTypeName;
diff --git a/packages/console/src/pages/ConnectorDetails/components/DeleteConnectorConfirmModal/index.tsx b/packages/console/src/pages/ConnectorDetails/components/DeleteConnectorConfirmModal/index.tsx
index ab5b7fa4b..f0d0a0d6c 100644
--- a/packages/console/src/pages/ConnectorDetails/components/DeleteConnectorConfirmModal/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/DeleteConnectorConfirmModal/index.tsx
@@ -12,7 +12,7 @@ type Props = {
   onConfirm: () => void;
 };
 
-const DeleteConnectorConfirmModal = ({ data, isOpen, onCancel, onConfirm }: Props) => {
+function DeleteConnectorConfirmModal({ data, isOpen, onCancel, onConfirm }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const isSocial = data.type === ConnectorType.Social;
 
@@ -40,6 +40,6 @@ const DeleteConnectorConfirmModal = ({ data, isOpen, onCancel, onConfirm }: Prop
       )}
     </ConfirmModal>
   );
-};
+}
 
 export default DeleteConnectorConfirmModal;
diff --git a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx
index d5f84340e..7b742fd2c 100644
--- a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx
@@ -25,7 +25,7 @@ type FormData = {
   sendTo: string;
 };
 
-const SenderTester = ({ connectorFactoryId, connectorType, className, parse }: Props) => {
+function SenderTester({ connectorFactoryId, connectorType, className, parse }: Props) {
   const [showTooltip, setShowTooltip] = useState(false);
   const {
     handleSubmit,
@@ -116,6 +116,6 @@ const SenderTester = ({ connectorFactoryId, connectorType, className, parse }: P
       <div className={styles.error}>{inputError?.message}</div>
     </div>
   );
-};
+}
 
 export default SenderTester;
diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index e3802cef6..9bfe6a1d1 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@@ -41,7 +41,6 @@ import * as styles from './index.module.scss';
 const getConnectorsPathname = (isSocial: boolean) =>
   `/connectors/${isSocial ? ConnectorsTabs.Social : ConnectorsTabs.Passwordless}`;
 
-// eslint-disable-next-line react/function-component-definition
 function ConnectorDetails() {
   const { pathname } = useLocation();
   const { connectorId } = useParams();
diff --git a/packages/console/src/pages/Connectors/components/ConfigForm/index.tsx b/packages/console/src/pages/Connectors/components/ConfigForm/index.tsx
index b15a54fea..a85798347 100644
--- a/packages/console/src/pages/Connectors/components/ConfigForm/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConfigForm/index.tsx
@@ -20,7 +20,7 @@ type Props = {
   formItems: ConnectorConfigFormItem[];
 };
 
-const ConfigForm = ({ formItems }: Props) => {
+function ConfigForm({ formItems }: Props) {
   const {
     watch,
     register,
@@ -150,6 +150,6 @@ const ConfigForm = ({ formItems }: Props) => {
       ))}
     </>
   );
-};
+}
 
 export default ConfigForm;
diff --git a/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx
index a35f4d2f4..ea26d9991 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   connectorGroup: ConnectorGroup;
 };
 
-const ConnectorDeleteButton = ({ connectorGroup }: Props) => {
+function ConnectorDeleteButton({ connectorGroup }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { mutate: mutateGlobal } = useSWRConfig();
   const { connectors } = connectorGroup;
@@ -77,6 +77,6 @@ const ConnectorDeleteButton = ({ connectorGroup }: Props) => {
       />
     </>
   );
-};
+}
 
 export default ConnectorDeleteButton;
diff --git a/packages/console/src/pages/Connectors/components/ConnectorForm/BasicForm.tsx b/packages/console/src/pages/Connectors/components/ConnectorForm/BasicForm.tsx
index b07390f33..6df3a1a76 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorForm/BasicForm.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorForm/BasicForm.tsx
@@ -25,12 +25,12 @@ type Props = {
   conflictConnectorName?: Record<string, string>;
 };
 
-const BasicForm = ({
+function BasicForm({
   isAllowEditTarget,
   isDarkDefaultVisible,
   isStandard,
   conflictConnectorName,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { getDocumentationUrl } = useDocumentationUrl();
   const {
@@ -175,6 +175,6 @@ const BasicForm = ({
       </FormField>
     </div>
   );
-};
+}
 
 export default BasicForm;
diff --git a/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.tsx b/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.tsx
index eae59486d..256ea8d43 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.tsx
@@ -21,7 +21,7 @@ type Props = {
   connectorType?: ConnectorType;
 };
 
-const ConfigForm = ({ formItems, className, connectorId, connectorType }: Props) => {
+function ConfigForm({ formItems, className, connectorId, connectorType }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     control,
@@ -65,6 +65,6 @@ const ConfigForm = ({ formItems, className, connectorId, connectorType }: Props)
       )}
     </div>
   );
-};
+}
 
 export default ConfigForm;
diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.tsx b/packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.tsx
index 79d5a5910..b057e9510 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.tsx
@@ -9,7 +9,7 @@ type Props = {
   connectorType: ConnectorType;
 };
 
-const DemoTag = ({ connectorType }: Props) => {
+function DemoTag({ connectorType }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const isSocial = connectorType === ConnectorType.Social;
 
@@ -20,6 +20,6 @@ const DemoTag = ({ connectorType }: Props) => {
       <div className={styles.tag}>{t('general.demo')}</div>
     </Tooltip>
   );
-};
+}
 
 export default DemoTag;
diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
index 1f5d16afd..27069edc7 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
@@ -24,7 +24,7 @@ type Props = {
   isDemo?: boolean;
 };
 
-const ConnectorName = ({ connectorGroup, isDemo = false }: Props) => {
+function ConnectorName({ connectorGroup, isDemo = false }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { type, connectors } = connectorGroup;
   const connector = connectors[0];
@@ -93,6 +93,6 @@ const ConnectorName = ({ connectorGroup, isDemo = false }: Props) => {
       {isDemo && <DemoTag connectorType={connector.type} />}
     </div>
   );
-};
+}
 
 export default ConnectorName;
diff --git a/packages/console/src/pages/Connectors/components/ConnectorStatus/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorStatus/index.tsx
index 3c047ddef..901ca1a72 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorStatus/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorStatus/index.tsx
@@ -8,7 +8,7 @@ type Props = {
   connectorGroup: ConnectorGroup;
 };
 
-const ConnectorStatus = ({ connectorGroup }: Props) => {
+function ConnectorStatus({ connectorGroup }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const { connectors } = connectorGroup;
@@ -24,6 +24,6 @@ const ConnectorStatus = ({ connectorGroup }: Props) => {
   ) : (
     <span>-</span>
   );
-};
+}
 
 export default ConnectorStatus;
diff --git a/packages/console/src/pages/Connectors/components/ConnectorStatusField/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorStatusField/index.tsx
index ea5aa9fc0..b0bb5bfaa 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorStatusField/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorStatusField/index.tsx
@@ -7,7 +7,7 @@ import { ToggleTip } from '@/components/Tip';
 
 import * as styles from './index.module.scss';
 
-const ConnectorStatusField = () => {
+function ConnectorStatusField() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -43,6 +43,6 @@ const ConnectorStatusField = () => {
       </ToggleTip>
     </div>
   );
-};
+}
 
 export default ConnectorStatusField;
diff --git a/packages/console/src/pages/Connectors/components/ConnectorTypeColumn/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorTypeColumn/index.tsx
index fd267cf4a..3aebf9687 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorTypeColumn/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorTypeColumn/index.tsx
@@ -10,7 +10,7 @@ type Props = {
   connectorGroup: ConnectorGroup;
 };
 
-const ConnectorTypeColumn = ({ connectorGroup: { type, connectors } }: Props) => {
+function ConnectorTypeColumn({ connectorGroup: { type, connectors } }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const standardConnectors = connectors.filter(({ isStandard }) => isStandard);
@@ -34,6 +34,6 @@ const ConnectorTypeColumn = ({ connectorGroup: { type, connectors } }: Props) =>
   }
 
   return <UnnamedTrans resource={connectorFactory.name} />;
-};
+}
 
 export default ConnectorTypeColumn;
diff --git a/packages/console/src/pages/Connectors/components/CreateForm/PlatformSelector.tsx b/packages/console/src/pages/Connectors/components/CreateForm/PlatformSelector.tsx
index 2d488b9a7..0c8432ee9 100644
--- a/packages/console/src/pages/Connectors/components/CreateForm/PlatformSelector.tsx
+++ b/packages/console/src/pages/Connectors/components/CreateForm/PlatformSelector.tsx
@@ -14,7 +14,7 @@ type Props = {
   onConnectorIdChange: (value: string) => void;
 };
 
-const PlatformSelector = ({ connectorGroup, connectorId, onConnectorIdChange }: Props) => {
+function PlatformSelector({ connectorGroup, connectorId, onConnectorIdChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   if (connectorGroup.connectors.length <= 1) {
@@ -42,6 +42,6 @@ const PlatformSelector = ({ connectorGroup, connectorId, onConnectorIdChange }:
       </RadioGroup>
     </div>
   );
-};
+}
 
 export default PlatformSelector;
diff --git a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
index 6b4aba844..89977de85 100644
--- a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
@@ -24,7 +24,7 @@ type Props = {
   onClose?: (connectorId?: string) => void;
 };
 
-const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
+function CreateForm({ onClose, isOpen: isFormOpen, type }: Props) {
   const { data: existingConnectors, error: connectorsError } = useSWR<
     ConnectorResponse[],
     RequestError
@@ -174,6 +174,6 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
       </ModalLayout>
     </Modal>
   );
-};
+}
 
 export default CreateForm;
diff --git a/packages/console/src/pages/Connectors/components/Guide/index.tsx b/packages/console/src/pages/Connectors/components/Guide/index.tsx
index b23dc4d00..414e9410e 100644
--- a/packages/console/src/pages/Connectors/components/Guide/index.tsx
+++ b/packages/console/src/pages/Connectors/components/Guide/index.tsx
@@ -41,7 +41,7 @@ type Props = {
   onClose: (id?: string) => void;
 };
 
-const Guide = ({ connector, onClose }: Props) => {
+function Guide({ connector, onClose }: Props) {
   const api = useApi({ hideErrorToast: true });
   const navigate = useNavigate();
   const callbackConnectorId = useRef(generateStandardId());
@@ -240,6 +240,6 @@ const Guide = ({ connector, onClose }: Props) => {
       </div>
     </Modal>
   );
-};
+}
 
 export default Guide;
diff --git a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx
index d718a3965..ca743249f 100644
--- a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx
+++ b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx
@@ -8,7 +8,7 @@ import useUserPreferences from '@/hooks/use-user-preferences';
 
 import * as styles from './index.module.scss';
 
-const SignInExperienceSetupNotice = () => {
+function SignInExperienceSetupNotice() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data: connectors } = useSWR<ConnectorResponse[]>('api/connectors');
   const {
@@ -39,6 +39,6 @@ const SignInExperienceSetupNotice = () => {
       </Alert>
     </div>
   );
-};
+}
 
 export default SignInExperienceSetupNotice;
diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx
index 54d3a0c0a..0afcb08c2 100644
--- a/packages/console/src/pages/Connectors/index.tsx
+++ b/packages/console/src/pages/Connectors/index.tsx
@@ -59,7 +59,6 @@ const isConnectorType = (value: string): value is ConnectorType =>
 const parseToConnectorType = (value?: string): ConnectorType | undefined =>
   conditional(value && isConnectorType(value) && value);
 
-// eslint-disable-next-line react/function-component-definition
 function Connectors() {
   const { tab = ConnectorsTabs.Passwordless, createType, factoryId } = useParams();
   const createConnectorType = parseToConnectorType(createType);
diff --git a/packages/console/src/pages/Dashboard/components/Block.tsx b/packages/console/src/pages/Dashboard/components/Block.tsx
index 1ae48f507..676724010 100644
--- a/packages/console/src/pages/Dashboard/components/Block.tsx
+++ b/packages/console/src/pages/Dashboard/components/Block.tsx
@@ -22,7 +22,7 @@ type Props = {
   variant?: 'bordered' | 'default' | 'plain';
 };
 
-const Block = ({ variant = 'default', count, delta, title, tip }: Props) => {
+function Block({ variant = 'default', count, delta, title, tip }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const deltaLabel = delta !== undefined && `${conditionalString(delta >= 0 && '+')}${delta}`;
@@ -51,6 +51,6 @@ const Block = ({ variant = 'default', count, delta, title, tip }: Props) => {
       </div>
     </Card>
   );
-};
+}
 
 export default Block;
diff --git a/packages/console/src/pages/Dashboard/components/ChartTooltip/index.tsx b/packages/console/src/pages/Dashboard/components/ChartTooltip/index.tsx
index 6e6963bf3..87aa9aecf 100644
--- a/packages/console/src/pages/Dashboard/components/ChartTooltip/index.tsx
+++ b/packages/console/src/pages/Dashboard/components/ChartTooltip/index.tsx
@@ -7,7 +7,7 @@ type Props = {
   payload?: Array<{ payload: { count: number; date: string } }>;
 };
 
-const ChartTooltip = ({ label, payload }: Props) => {
+function ChartTooltip({ label, payload }: Props) {
   if (!label || !payload?.[0]) {
     return null;
   }
@@ -18,6 +18,6 @@ const ChartTooltip = ({ label, payload }: Props) => {
       <div className={styles.label}>{label}</div>
     </div>
   );
-};
+}
 
 export default ChartTooltip;
diff --git a/packages/console/src/pages/Dashboard/components/Skeleton/index.tsx b/packages/console/src/pages/Dashboard/components/Skeleton/index.tsx
index 1c1e3a9b2..1ee9ff71a 100644
--- a/packages/console/src/pages/Dashboard/components/Skeleton/index.tsx
+++ b/packages/console/src/pages/Dashboard/components/Skeleton/index.tsx
@@ -2,32 +2,34 @@ import Card from '@/components/Card';
 
 import * as styles from './index.module.scss';
 
-const Skeleton = () => (
-  <div>
-    <div className={styles.blocks}>
-      {[...Array.from({ length: 3 }).keys()].map((index) => (
-        <Card key={index} className={styles.block}>
-          <div className={styles.title} />
-          <div className={styles.number} />
-        </Card>
-      ))}
-    </div>
-    <Card>
-      <div className={styles.dau}>
-        <div className={styles.title} />
-        <div className={styles.number} />
-      </div>
-      <div className={styles.curve} />
-      <div className={styles.activeBlocks}>
-        {[...Array.from({ length: 2 }).keys()].map((index) => (
+function Skeleton() {
+  return (
+    <div>
+      <div className={styles.blocks}>
+        {[...Array.from({ length: 3 }).keys()].map((index) => (
           <Card key={index} className={styles.block}>
             <div className={styles.title} />
             <div className={styles.number} />
           </Card>
         ))}
       </div>
-    </Card>
-  </div>
-);
+      <Card>
+        <div className={styles.dau}>
+          <div className={styles.title} />
+          <div className={styles.number} />
+        </div>
+        <div className={styles.curve} />
+        <div className={styles.activeBlocks}>
+          {[...Array.from({ length: 2 }).keys()].map((index) => (
+            <Card key={index} className={styles.block}>
+              <div className={styles.title} />
+              <div className={styles.number} />
+            </Card>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+}
 
 export default Skeleton;
diff --git a/packages/console/src/pages/Dashboard/index.tsx b/packages/console/src/pages/Dashboard/index.tsx
index b7f4282ea..cfadec7c1 100644
--- a/packages/console/src/pages/Dashboard/index.tsx
+++ b/packages/console/src/pages/Dashboard/index.tsx
@@ -36,7 +36,6 @@ const tickFormatter = new Intl.NumberFormat('en-US', {
   notation: 'compact',
 });
 
-// eslint-disable-next-line react/function-component-definition
 function Dashboard() {
   const [date, setDate] = useState<string>(format(Date.now(), 'yyyy-MM-dd'));
   const { data: totalData, error: totalError } = useSWR<TotalUsersResponse, RequestError>(
diff --git a/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx b/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx
index 4a600077e..a1a652588 100644
--- a/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx
+++ b/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx
@@ -14,7 +14,7 @@ import { onKeyDownHandler } from '@/utils/a11y';
 import useGetStartedMetadata from '../../hook';
 import * as styles from './index.module.scss';
 
-const GetStartedProgress = () => {
+function GetStartedProgress() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     data: { getStartedHidden },
@@ -83,6 +83,6 @@ const GetStartedProgress = () => {
       </Dropdown>
     </>
   );
-};
+}
 
 export default GetStartedProgress;
diff --git a/packages/console/src/pages/GetStarted/components/Skeleton/index.tsx b/packages/console/src/pages/GetStarted/components/Skeleton/index.tsx
index 1fe2935f8..881d2677c 100644
--- a/packages/console/src/pages/GetStarted/components/Skeleton/index.tsx
+++ b/packages/console/src/pages/GetStarted/components/Skeleton/index.tsx
@@ -1,17 +1,19 @@
 import * as styles from './index.module.scss';
 
-const Skeleton = () => (
-  <>
-    {[...Array.from({ length: 5 }).keys()].map((key) => (
-      <div key={key} className={styles.card}>
-        <div className={styles.icon} />
-        <div className={styles.wrapper}>
-          <div className={styles.title} />
-          <div className={styles.subtitle} />
+function Skeleton() {
+  return (
+    <>
+      {[...Array.from({ length: 5 }).keys()].map((key) => (
+        <div key={key} className={styles.card}>
+          <div className={styles.icon} />
+          <div className={styles.wrapper}>
+            <div className={styles.title} />
+            <div className={styles.subtitle} />
+          </div>
         </div>
-      </div>
-    ))}
-  </>
-);
+      ))}
+    </>
+  );
+}
 
 export default Skeleton;
diff --git a/packages/console/src/pages/GetStarted/index.tsx b/packages/console/src/pages/GetStarted/index.tsx
index 427f49b4f..7dcb4371f 100644
--- a/packages/console/src/pages/GetStarted/index.tsx
+++ b/packages/console/src/pages/GetStarted/index.tsx
@@ -14,7 +14,6 @@ import Skeleton from './components/Skeleton';
 import useGetStartedMetadata from './hook';
 import * as styles from './index.module.scss';
 
-// eslint-disable-next-line react/function-component-definition
 function GetStarted() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
diff --git a/packages/console/src/pages/Main/index.tsx b/packages/console/src/pages/Main/index.tsx
index 33fcc586a..5add1bf86 100644
--- a/packages/console/src/pages/Main/index.tsx
+++ b/packages/console/src/pages/Main/index.tsx
@@ -12,7 +12,7 @@ import Welcome from '@/pages/Welcome';
 
 import HandleSocialCallback from '../Profile/containers/HandleSocialCallback';
 
-const Main = () => {
+function Main() {
   const swrOptions = useSwrOptions();
 
   return (
@@ -32,6 +32,6 @@ const Main = () => {
       </SWRConfig>
     </BrowserRouter>
   );
-};
+}
 
 export default Main;
diff --git a/packages/console/src/pages/NotFound/index.tsx b/packages/console/src/pages/NotFound/index.tsx
index 3505224c0..adbac3053 100644
--- a/packages/console/src/pages/NotFound/index.tsx
+++ b/packages/console/src/pages/NotFound/index.tsx
@@ -8,7 +8,7 @@ import useTheme from '@/hooks/use-theme';
 
 import * as styles from './index.module.scss';
 
-const NotFound = () => {
+function NotFound() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
 
@@ -20,6 +20,6 @@ const NotFound = () => {
       </Card>
     </div>
   );
-};
+}
 
 export default NotFound;
diff --git a/packages/console/src/pages/Profile/components/BasicUserInfoSection/index.tsx b/packages/console/src/pages/Profile/components/BasicUserInfoSection/index.tsx
index 0e0306c0b..0b02fca03 100644
--- a/packages/console/src/pages/Profile/components/BasicUserInfoSection/index.tsx
+++ b/packages/console/src/pages/Profile/components/BasicUserInfoSection/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   onUpdate?: () => void;
 };
 
-const BasicUserInfoSection = ({ user, onUpdate }: Props) => {
+function BasicUserInfoSection({ user, onUpdate }: Props) {
   const [editingField, setEditingField] = useState<BasicUserField>();
   const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false);
 
@@ -92,6 +92,6 @@ const BasicUserInfoSection = ({ user, onUpdate }: Props) => {
       )}
     </FormCard>
   );
-};
+}
 
 export default BasicUserInfoSection;
diff --git a/packages/console/src/pages/Profile/components/CardContent/index.tsx b/packages/console/src/pages/Profile/components/CardContent/index.tsx
index 4f33ccc52..69c6ae75f 100644
--- a/packages/console/src/pages/Profile/components/CardContent/index.tsx
+++ b/packages/console/src/pages/Profile/components/CardContent/index.tsx
@@ -28,10 +28,10 @@ type Props<T> = {
   data: Array<Row<T>>;
 };
 
-const CardContent = <T extends Nullable<boolean | string | Record<string, unknown>> | undefined>({
+function CardContent<T extends Nullable<boolean | string | Record<string, unknown>> | undefined>({
   title,
   data,
-}: Props<T>) => {
+}: Props<T>) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const defaultRenderer = (value: unknown) => (value ? <span>{String(value)}</span> : <NotSet />);
 
@@ -80,6 +80,6 @@ const CardContent = <T extends Nullable<boolean | string | Record<string, unknow
       </table>
     </div>
   );
-};
+}
 
 export default CardContent;
diff --git a/packages/console/src/pages/Profile/components/LinkAccountSection/index.tsx b/packages/console/src/pages/Profile/components/LinkAccountSection/index.tsx
index 5bf40240c..2e5ceca2c 100644
--- a/packages/console/src/pages/Profile/components/LinkAccountSection/index.tsx
+++ b/packages/console/src/pages/Profile/components/LinkAccountSection/index.tsx
@@ -31,7 +31,7 @@ type Props = {
   onUpdate: () => void;
 };
 
-const LinkAccountSection = ({ user, connectors, onUpdate }: Props) => {
+function LinkAccountSection({ user, connectors, onUpdate }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
   const theme = useTheme();
@@ -161,6 +161,6 @@ const LinkAccountSection = ({ user, connectors, onUpdate }: Props) => {
       <CardContent title="profile.link_account.social_sign_in" data={tableInfo} />
     </FormCard>
   );
-};
+}
 
 export default LinkAccountSection;
diff --git a/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.tsx b/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.tsx
index efd3595a4..a4ccd3edc 100644
--- a/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.tsx
+++ b/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.tsx
@@ -19,14 +19,7 @@ type Props = PropsWithChildren<{
   onGoBack?: () => void;
 }>;
 
-const MainFlowLikeModal = ({
-  title,
-  subtitle,
-  subtitleProps,
-  children,
-  onClose,
-  onGoBack,
-}: Props) => {
+function MainFlowLikeModal({ title, subtitle, subtitleProps, children, onClose, onGoBack }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
 
@@ -60,6 +53,6 @@ const MainFlowLikeModal = ({
       </div>
     </ReactModal>
   );
-};
+}
 
 export default MainFlowLikeModal;
diff --git a/packages/console/src/pages/Profile/components/NotSet/index.tsx b/packages/console/src/pages/Profile/components/NotSet/index.tsx
index 98ccd6025..b142cc9ad 100644
--- a/packages/console/src/pages/Profile/components/NotSet/index.tsx
+++ b/packages/console/src/pages/Profile/components/NotSet/index.tsx
@@ -2,10 +2,10 @@ import { useTranslation } from 'react-i18next';
 
 import * as styles from './index.module.scss';
 
-const NotSet = () => {
+function NotSet() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return <span className={styles.text}>{t('profile.not_set')}</span>;
-};
+}
 
 export default NotSet;
diff --git a/packages/console/src/pages/Profile/components/Skeleton/index.tsx b/packages/console/src/pages/Profile/components/Skeleton/index.tsx
index a91b43774..87c5c5221 100644
--- a/packages/console/src/pages/Profile/components/Skeleton/index.tsx
+++ b/packages/console/src/pages/Profile/components/Skeleton/index.tsx
@@ -1,6 +1,6 @@
 import * as styles from './index.module.scss';
 
-const Skeleton = () => {
+function Skeleton() {
   return (
     <div className={styles.container}>
       {Array.from({ length: 2 }).map((_, sectionIndex) => (
@@ -34,6 +34,6 @@ const Skeleton = () => {
       ))}
     </div>
   );
-};
+}
 
 export default Skeleton;
diff --git a/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx b/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
index c11d22b7c..58bfe3497 100644
--- a/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
@@ -30,7 +30,7 @@ type FormFields = {
   [key in BasicUserField]: string;
 };
 
-const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose }: Props) => {
+function BasicUserInfoUpdateModal({ field, value: initialValue, isOpen, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { show: showModal } = useConfirmModal();
   const api = useStaticApi({
@@ -155,6 +155,6 @@ const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default BasicUserInfoUpdateModal;
diff --git a/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx b/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
index f3d95496e..ab7ab8511 100644
--- a/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
@@ -30,7 +30,7 @@ const defaultValues: FormFields = {
   showPassword: false,
 };
 
-const ChangePasswordModal = () => {
+function ChangePasswordModal() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
   const { show: showModal } = useConfirmModal();
@@ -154,6 +154,6 @@ const ChangePasswordModal = () => {
       />
     </MainFlowLikeModal>
   );
-};
+}
 
 export default ChangePasswordModal;
diff --git a/packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx b/packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx
index bf3bf5a17..48fc12f0b 100644
--- a/packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx
@@ -16,7 +16,7 @@ type Props = {
 const contactUsEmail = 'contact@logto.io';
 const mailToLink = `mailto:${contactUsEmail}?subject=Account%20Deletion%20Request`;
 
-const DeleteAccountModal = ({ isOpen, onClose }: Props) => {
+function DeleteAccountModal({ isOpen, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -48,6 +48,6 @@ const DeleteAccountModal = ({ isOpen, onClose }: Props) => {
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default DeleteAccountModal;
diff --git a/packages/console/src/pages/Profile/containers/HandleSocialCallback/index.tsx b/packages/console/src/pages/Profile/containers/HandleSocialCallback/index.tsx
index 72ce22554..a5da637f9 100644
--- a/packages/console/src/pages/Profile/containers/HandleSocialCallback/index.tsx
+++ b/packages/console/src/pages/Profile/containers/HandleSocialCallback/index.tsx
@@ -8,7 +8,7 @@ import { useConfirmModal } from '@/hooks/use-confirm-modal';
 
 import { handleError } from '../../utils';
 
-const HandleSocialCallback = () => {
+function HandleSocialCallback() {
   const { search } = useLocation();
   const { show: showModal } = useConfirmModal();
   const api = useStaticApi({
@@ -53,6 +53,6 @@ const HandleSocialCallback = () => {
   }, [api, search, showModal]);
 
   return <AppLoading />;
-};
+}
 
 export default HandleSocialCallback;
diff --git a/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx b/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
index ae224ce95..f367d02b3 100644
--- a/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
@@ -16,7 +16,7 @@ type EmailForm = {
   email: string;
 };
 
-const LinkEmailModal = () => {
+function LinkEmailModal() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
   const { state } = useLocation();
@@ -79,6 +79,6 @@ const LinkEmailModal = () => {
       />
     </MainFlowLikeModal>
   );
-};
+}
 
 export default LinkEmailModal;
diff --git a/packages/console/src/pages/Profile/containers/VerificationCodeModal/index.tsx b/packages/console/src/pages/Profile/containers/VerificationCodeModal/index.tsx
index b65398f9c..debd1218e 100644
--- a/packages/console/src/pages/Profile/containers/VerificationCodeModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/VerificationCodeModal/index.tsx
@@ -26,7 +26,7 @@ const getTimeout = () => {
   return now;
 };
 
-const VerificationCodeModal = () => {
+function VerificationCodeModal() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
   const { show: showModal } = useConfirmModal();
@@ -155,6 +155,6 @@ const VerificationCodeModal = () => {
       )}
     </MainFlowLikeModal>
   );
-};
+}
 
 export default VerificationCodeModal;
diff --git a/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx b/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
index abe20cbb4..eb1dfa270 100644
--- a/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
+++ b/packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
@@ -22,7 +22,7 @@ type FormFields = {
   password: string;
 };
 
-const VerifyPasswordModal = () => {
+function VerifyPasswordModal() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
   const { state } = useLocation();
@@ -117,6 +117,6 @@ const VerifyPasswordModal = () => {
       )}
     </MainFlowLikeModal>
   );
-};
+}
 
 export default VerifyPasswordModal;
diff --git a/packages/console/src/pages/Profile/index.tsx b/packages/console/src/pages/Profile/index.tsx
index 142555a9a..06673d3e7 100644
--- a/packages/console/src/pages/Profile/index.tsx
+++ b/packages/console/src/pages/Profile/index.tsx
@@ -22,7 +22,6 @@ import Skeleton from './components/Skeleton';
 import DeleteAccountModal from './containers/DeleteAccountModal';
 import * as styles from './index.module.scss';
 
-// eslint-disable-next-line react/function-component-definition
 function Profile() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
diff --git a/packages/console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx b/packages/console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx
index b580bb1fd..82b492f4b 100644
--- a/packages/console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx
+++ b/packages/console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   onClose: (success?: boolean) => void;
 };
 
-const AssignPermissionsModal = ({ roleId, onClose }: Props) => {
+function AssignPermissionsModal({ roleId, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -82,6 +82,6 @@ const AssignPermissionsModal = ({ roleId, onClose }: Props) => {
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default AssignPermissionsModal;
diff --git a/packages/console/src/pages/RoleDetails/RolePermissions/index.tsx b/packages/console/src/pages/RoleDetails/RolePermissions/index.tsx
index 3cc7dfb75..730ab9452 100644
--- a/packages/console/src/pages/RoleDetails/RolePermissions/index.tsx
+++ b/packages/console/src/pages/RoleDetails/RolePermissions/index.tsx
@@ -19,7 +19,7 @@ import AssignPermissionsModal from './components/AssignPermissionsModal';
 
 const pageSize = defaultPageSize;
 
-const RolePermissions = () => {
+function RolePermissions() {
   const {
     role: { id: roleId },
   } = useOutletContext<RoleDetailsOutletContext>();
@@ -126,6 +126,6 @@ const RolePermissions = () => {
       )}
     </>
   );
-};
+}
 
 export default RolePermissions;
diff --git a/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx b/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx
index df1e7ea75..aa6364549 100644
--- a/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx
+++ b/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx
@@ -13,7 +13,7 @@ import useApi from '@/hooks/use-api';
 
 import type { RoleDetailsOutletContext } from '../types';
 
-const RoleSettings = () => {
+function RoleSettings() {
   const { role, isDeleting, onRoleUpdated } = useOutletContext<RoleDetailsOutletContext>();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
@@ -65,6 +65,6 @@ const RoleSettings = () => {
       <UnsavedChangesAlertModal hasUnsavedChanges={!isDeleting && isDirty} />
     </>
   );
-};
+}
 
 export default RoleSettings;
diff --git a/packages/console/src/pages/RoleDetails/RoleUsers/components/AssignUsersModal/index.tsx b/packages/console/src/pages/RoleDetails/RoleUsers/components/AssignUsersModal/index.tsx
index 8243fbf00..d5234f221 100644
--- a/packages/console/src/pages/RoleDetails/RoleUsers/components/AssignUsersModal/index.tsx
+++ b/packages/console/src/pages/RoleDetails/RoleUsers/components/AssignUsersModal/index.tsx
@@ -17,7 +17,7 @@ type Props = {
   onClose: (success?: boolean) => void;
 };
 
-const AssignUsersModal = ({ roleId, isRemindSkip = false, onClose }: Props) => {
+function AssignUsersModal({ roleId, isRemindSkip = false, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [isLoading, setIsLoading] = useState(false);
   const [users, setUsers] = useState<User[]>([]);
@@ -93,6 +93,6 @@ const AssignUsersModal = ({ roleId, isRemindSkip = false, onClose }: Props) => {
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default AssignUsersModal;
diff --git a/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx b/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx
index 192f0cbce..d784766dd 100644
--- a/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx
+++ b/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx
@@ -31,7 +31,7 @@ import * as styles from './index.module.scss';
 
 const pageSize = defaultPageSize;
 
-const RoleUsers = () => {
+function RoleUsers() {
   const {
     role: { id: roleId },
   } = useOutletContext<RoleDetailsOutletContext>();
@@ -194,6 +194,6 @@ const RoleUsers = () => {
       )}
     </>
   );
-};
+}
 
 export default RoleUsers;
diff --git a/packages/console/src/pages/RoleDetails/index.tsx b/packages/console/src/pages/RoleDetails/index.tsx
index 6920ebc90..baddb6d65 100644
--- a/packages/console/src/pages/RoleDetails/index.tsx
+++ b/packages/console/src/pages/RoleDetails/index.tsx
@@ -26,7 +26,6 @@ import { withAppInsights } from '@/utils/app-insights';
 import * as styles from './index.module.scss';
 import { RoleDetailsOutletContext } from './types';
 
-// eslint-disable-next-line react/function-component-definition
 function RoleDetails() {
   const { pathname } = useLocation();
   const { id } = useParams();
diff --git a/packages/console/src/pages/Roles/components/AssignedUsers/index.tsx b/packages/console/src/pages/Roles/components/AssignedUsers/index.tsx
index ee0f4b1ec..03b5e0c1d 100644
--- a/packages/console/src/pages/Roles/components/AssignedUsers/index.tsx
+++ b/packages/console/src/pages/Roles/components/AssignedUsers/index.tsx
@@ -9,8 +9,8 @@ type Props = {
   count: number;
 };
 
-const AssignedUsers = ({ users, count }: Props) =>
-  count ? (
+function AssignedUsers({ users, count }: Props) {
+  return count ? (
     <div className={styles.users}>
       <div className={styles.avatars}>
         {users.map((user) => (
@@ -22,5 +22,6 @@ const AssignedUsers = ({ users, count }: Props) =>
   ) : (
     <div className={styles.empty}>-</div>
   );
+}
 
 export default AssignedUsers;
diff --git a/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx b/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx
index ee5ada71a..ec67b80ba 100644
--- a/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx
+++ b/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx
@@ -24,7 +24,7 @@ type CreateRolePayload = Pick<Role, 'name' | 'description'> & {
   scopeIds?: string[];
 };
 
-const CreateRoleForm = ({ onClose }: Props) => {
+function CreateRoleForm({ onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     control,
@@ -106,6 +106,6 @@ const CreateRoleForm = ({ onClose }: Props) => {
       </form>
     </ModalLayout>
   );
-};
+}
 
 export default CreateRoleForm;
diff --git a/packages/console/src/pages/Roles/components/CreateRoleModal/index.tsx b/packages/console/src/pages/Roles/components/CreateRoleModal/index.tsx
index 9d219a482..2897c58d5 100644
--- a/packages/console/src/pages/Roles/components/CreateRoleModal/index.tsx
+++ b/packages/console/src/pages/Roles/components/CreateRoleModal/index.tsx
@@ -15,7 +15,7 @@ type Props = {
   onClose: () => void;
 };
 
-const CreateRoleModal = ({ onClose }: Props) => {
+function CreateRoleModal({ onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
 
@@ -53,6 +53,6 @@ const CreateRoleModal = ({ onClose }: Props) => {
       )}
     </ReactModal>
   );
-};
+}
 
 export default CreateRoleModal;
diff --git a/packages/console/src/pages/Roles/index.tsx b/packages/console/src/pages/Roles/index.tsx
index 53f0e03c3..77660a2ab 100644
--- a/packages/console/src/pages/Roles/index.tsx
+++ b/packages/console/src/pages/Roles/index.tsx
@@ -31,7 +31,6 @@ const buildDetailsPathname = (id: string) => `${rolesPathname}/${id}`;
 
 const pageSize = defaultPageSize;
 
-// eslint-disable-next-line react/function-component-definition
 function Roles() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { pathname, search } = useLocation();
diff --git a/packages/console/src/pages/SignInExperience/components/Preview/index.tsx b/packages/console/src/pages/SignInExperience/components/Preview/index.tsx
index 75693b23b..06e1a3fc5 100644
--- a/packages/console/src/pages/SignInExperience/components/Preview/index.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Preview/index.tsx
@@ -22,12 +22,12 @@ type Props = {
   className?: string;
 };
 
-const Preview = ({
+function Preview({
   isLivePreviewDisabled = false,
   isLivePreviewEntryInvisible = false,
   signInExperience,
   className,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [language, setLanguage] = useState<LanguageTag>('en');
   const [mode, setMode] = useState<Theme>(Theme.Light);
@@ -122,6 +122,6 @@ const Preview = ({
       />
     </div>
   );
-};
+}
 
 export default Preview;
diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/DiffSegment.tsx b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/DiffSegment.tsx
index aba003a9d..5feab6c9f 100644
--- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/DiffSegment.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/DiffSegment.tsx
@@ -8,13 +8,13 @@ type Props = {
   isAfter?: boolean;
 };
 
-const DiffSegment = ({ children, hasChanged, isAfter = false }: Props) => {
+function DiffSegment({ children, hasChanged, isAfter = false }: Props) {
   if (!hasChanged) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return <>{children}</>;
   }
 
   return <span className={isAfter ? styles.green : styles.red}>{children}</span>;
-};
+}
 
 export default DiffSegment;
diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx
index 9174e2411..e2f3e39ef 100644
--- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx
@@ -16,7 +16,7 @@ type Props = {
   isAfter?: boolean;
 };
 
-const SignInDiffSection = ({ before, after, isAfter = false }: Props) => {
+function SignInDiffSection({ before, after, isAfter = false }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const beforeSignInMethodsObject = convertToSignInMethodsObject(before);
@@ -86,6 +86,6 @@ const SignInDiffSection = ({ before, after, isAfter = false }: Props) => {
       </ul>
     </div>
   );
-};
+}
 
 export default SignInDiffSection;
diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx
index cce9e23a6..ce8645cf7 100644
--- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx
@@ -16,7 +16,7 @@ type Props = {
   isAfter?: boolean;
 };
 
-const SignUpDiffSection = ({ before, after, isAfter = false }: Props) => {
+function SignUpDiffSection({ before, after, isAfter = false }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const parsedBefore = signInExperienceParser.toLocalSignUp(before);
   const parsedAfter = signInExperienceParser.toLocalSignUp(after);
@@ -57,6 +57,6 @@ const SignUpDiffSection = ({ before, after, isAfter = false }: Props) => {
       </ul>
     </div>
   );
-};
+}
 
 export default SignUpDiffSection;
diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx
index 2ca333bf9..742e55125 100644
--- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx
@@ -14,7 +14,7 @@ type Props = {
   isAfter?: boolean;
 };
 
-const SocialTargetsDiffSection = ({ before, after, isAfter = false }: Props) => {
+function SocialTargetsDiffSection({ before, after, isAfter = false }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data: groups, error } = useConnectorGroups();
   const { language } = i18next;
@@ -58,6 +58,6 @@ const SocialTargetsDiffSection = ({ before, after, isAfter = false }: Props) =>
       </ul>
     </div>
   );
-};
+}
 
 export default SocialTargetsDiffSection;
diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.tsx b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.tsx
index cf85f238e..d051ea83c 100644
--- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.tsx
@@ -10,20 +10,22 @@ type Props = {
   isAfter?: boolean;
 };
 
-const SignUpAndSignInDiffSection = ({ before, after, isAfter = false }: Props) => (
-  <>
-    <SignUpDiffSection before={before.signUp} after={after.signUp} isAfter={isAfter} />
-    <SignInDiffSection
-      before={before.signIn.methods}
-      after={after.signIn.methods}
-      isAfter={isAfter}
-    />
-    <SocialTargetsDiffSection
-      before={before.socialSignInConnectorTargets}
-      after={after.socialSignInConnectorTargets}
-      isAfter={isAfter}
-    />
-  </>
-);
+function SignUpAndSignInDiffSection({ before, after, isAfter = false }: Props) {
+  return (
+    <>
+      <SignUpDiffSection before={before.signUp} after={after.signUp} isAfter={isAfter} />
+      <SignInDiffSection
+        before={before.signIn.methods}
+        after={after.signIn.methods}
+        isAfter={isAfter}
+      />
+      <SocialTargetsDiffSection
+        before={before.socialSignInConnectorTargets}
+        after={after.socialSignInConnectorTargets}
+        isAfter={isAfter}
+      />
+    </>
+  );
+}
 
 export default SignUpAndSignInDiffSection;
diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/index.tsx b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/index.tsx
index 5fba60e45..4ce82d4f6 100644
--- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/index.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/index.tsx
@@ -9,7 +9,7 @@ type Props = {
   after: SignInExperience;
 };
 
-const SignUpAndSignInChangePreview = ({ before, after }: Props) => {
+function SignUpAndSignInChangePreview({ before, after }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -27,6 +27,6 @@ const SignUpAndSignInChangePreview = ({ before, after }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default SignUpAndSignInChangePreview;
diff --git a/packages/console/src/pages/SignInExperience/components/Skeleton/index.tsx b/packages/console/src/pages/SignInExperience/components/Skeleton/index.tsx
index b29dfb82f..27e0b77f1 100644
--- a/packages/console/src/pages/SignInExperience/components/Skeleton/index.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Skeleton/index.tsx
@@ -6,7 +6,7 @@ import Spacer from '@/components/Spacer';
 import * as pageStyles from '../../index.module.scss';
 import * as styles from './index.module.scss';
 
-const Skeleton = () => {
+function Skeleton() {
   return (
     <div className={classNames(pageStyles.container, styles.container)}>
       <CardTitle
@@ -56,6 +56,6 @@ const Skeleton = () => {
       </div>
     </div>
   );
-};
+}
 
 export default Skeleton;
diff --git a/packages/console/src/pages/SignInExperience/components/TabWrapper/index.tsx b/packages/console/src/pages/SignInExperience/components/TabWrapper/index.tsx
index b9bf8b60e..6038f0fa8 100644
--- a/packages/console/src/pages/SignInExperience/components/TabWrapper/index.tsx
+++ b/packages/console/src/pages/SignInExperience/components/TabWrapper/index.tsx
@@ -9,8 +9,8 @@ type Props = {
   children: ReactNode;
 };
 
-const TabWrapper = ({ isActive, className, children }: Props) => {
+function TabWrapper({ isActive, className, children }: Props) {
   return <div className={classNames(!isActive && styles.hide, className)}>{children}</div>;
-};
+}
 
 export default TabWrapper;
diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx b/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx
index 02076f033..2c7a2f7f3 100644
--- a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx
@@ -30,7 +30,7 @@ type Props = {
   onClose: () => void;
 };
 
-const GuideModal = ({ isOpen, onClose }: Props) => {
+function GuideModal({ isOpen, onClose }: Props) {
   const { data } = useSWR<SignInExperience>('api/sign-in-exp');
   const { data: preferences, update: updatePreferences } = useUserPreferences();
   const { updateConfigs } = useConfigs();
@@ -143,6 +143,6 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
       </div>
     </Modal>
   );
-};
+}
 
 export default GuideModal;
diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/index.tsx b/packages/console/src/pages/SignInExperience/components/Welcome/index.tsx
index 310536818..e6f42ff38 100644
--- a/packages/console/src/pages/SignInExperience/components/Welcome/index.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Welcome/index.tsx
@@ -14,7 +14,7 @@ type Props = {
   mutate: () => void;
 };
 
-const Welcome = ({ mutate }: Props) => {
+function Welcome({ mutate }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [isOpen, setIsOpen] = useState(false);
   const theme = useTheme();
@@ -45,6 +45,6 @@ const Welcome = ({ mutate }: Props) => {
       />
     </div>
   );
-};
+}
 
 export default Welcome;
diff --git a/packages/console/src/pages/SignInExperience/index.tsx b/packages/console/src/pages/SignInExperience/index.tsx
index 50bba55b9..1b4ba12fe 100644
--- a/packages/console/src/pages/SignInExperience/index.tsx
+++ b/packages/console/src/pages/SignInExperience/index.tsx
@@ -46,18 +46,19 @@ type PageWrapperProps = {
   children: ReactNode;
 };
 
-const PageWrapper = ({ children }: PageWrapperProps) => (
-  <div className={styles.container}>
-    <CardTitle
-      title="sign_in_exp.title"
-      subtitle="sign_in_exp.description"
-      className={styles.cardTitle}
-    />
-    {children}
-  </div>
-);
+function PageWrapper({ children }: PageWrapperProps) {
+  return (
+    <div className={styles.container}>
+      <CardTitle
+        title="sign_in_exp.title"
+        subtitle="sign_in_exp.description"
+        className={styles.cardTitle}
+      />
+      {children}
+    </div>
+  );
+}
 
-// eslint-disable-next-line react/function-component-definition
 function SignInExperience() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { tab } = useParams();
diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
index 103bd9ad1..53eac8894 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
@@ -18,7 +18,7 @@ import type { SignInExperienceForm } from '../../types';
 import * as styles from '../index.module.scss';
 import LogoAndFaviconUploader from './components/LogoAndFaviconUploader';
 
-const BrandingForm = () => {
+function BrandingForm() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { isReady: isUserAssetsServiceReady } = useUserAssetsService();
   const {
@@ -166,6 +166,6 @@ const BrandingForm = () => {
       )}
     </Card>
   );
-};
+}
 
 export default BrandingForm;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.tsx
index 7f2591648..e834beead 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.tsx
@@ -11,7 +11,7 @@ import type { SignInExperienceForm } from '../../types';
 import * as tabsStyles from '../index.module.scss';
 import * as brandingStyles from './CustomCssForm.module.scss';
 
-const CustomCssForm = () => {
+function CustomCssForm() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { getDocumentationUrl } = useDocumentationUrl();
   const { control } = useFormContext<SignInExperienceForm>();
@@ -60,6 +60,6 @@ const CustomCssForm = () => {
       </FormField>
     </Card>
   );
-};
+}
 
 export default CustomCssForm;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx b/packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx
index 3918c9f40..f32d94c2d 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx
@@ -12,7 +12,7 @@ import { convertToFileExtensionArray } from '@/utils/uploader';
 
 import * as styles from './index.module.scss';
 
-const LogoAndFaviconUploader = () => {
+function LogoAndFaviconUploader() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [uploadLogoError, setUploadLogoError] = useState<string>();
   const [uploadFaviconError, setUploadFaviconError] = useState<string>();
@@ -77,6 +77,6 @@ const LogoAndFaviconUploader = () => {
       </div>
     </div>
   );
-};
+}
 
 export default LogoAndFaviconUploader;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/index.tsx b/packages/console/src/pages/SignInExperience/tabs/Branding/index.tsx
index 9fde1b699..269c35f98 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/index.tsx
@@ -7,11 +7,13 @@ type Props = {
   isActive: boolean;
 };
 
-const Branding = ({ isActive }: Props) => (
-  <TabWrapper isActive={isActive} className={styles.tabContent}>
-    <BrandingForm />
-    <CustomCssForm />
-  </TabWrapper>
-);
+function Branding({ isActive }: Props) {
+  return (
+    <TabWrapper isActive={isActive} className={styles.tabContent}>
+      <BrandingForm />
+      <CustomCssForm />
+    </TabWrapper>
+  );
+}
 
 export default Branding;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/AuthenticationForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/AuthenticationForm.tsx
index 3aee6352f..02040a750 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/AuthenticationForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/AuthenticationForm.tsx
@@ -8,7 +8,7 @@ import Switch from '@/components/Switch';
 import type { SignInExperienceForm } from '../../types';
 import * as styles from '../index.module.scss';
 
-const AuthenticationForm = () => {
+function AuthenticationForm() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { register } = useFormContext<SignInExperienceForm>();
 
@@ -23,6 +23,6 @@ const AuthenticationForm = () => {
       </FormField>
     </Card>
   );
-};
+}
 
 export default AuthenticationForm;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/LanguagesForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/LanguagesForm.tsx
index 21ca7a281..4071f74b8 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/LanguagesForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/LanguagesForm.tsx
@@ -20,7 +20,7 @@ type Props = {
   isManageLanguageVisible?: boolean;
 };
 
-const LanguagesForm = ({ isManageLanguageVisible = false }: Props) => {
+function LanguagesForm({ isManageLanguageVisible = false }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data: signInExperience } = useSWR<SignInExperience, RequestError>('api/sign-in-exp');
   const { watch, control, register, setValue } = useFormContext<SignInExperienceForm>();
@@ -72,6 +72,6 @@ const LanguagesForm = ({ isManageLanguageVisible = false }: Props) => {
       </FormField>
     </Card>
   );
-};
+}
 
 export default LanguagesForm;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
index b9c88ed3f..5a0fa2e6f 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
@@ -9,7 +9,7 @@ import { uriValidator } from '@/utils/validator';
 import type { SignInExperienceForm } from '../../types';
 import * as styles from '../index.module.scss';
 
-const TermsForm = () => {
+function TermsForm() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     register,
@@ -41,6 +41,6 @@ const TermsForm = () => {
       </FormField>
     </Card>
   );
-};
+}
 
 export default TermsForm;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx
index d5509dcf5..f8a8bf0d9 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx
@@ -18,7 +18,7 @@ type Props = {
   onSelect: (languageTag: LanguageTag) => void;
 };
 
-const AddLanguageSelector = ({ options, onSelect }: Props) => {
+function AddLanguageSelector({ options, onSelect }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const selectorRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -112,6 +112,6 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
       )}
     </div>
   );
-};
+}
 
 export default AddLanguageSelector;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx
index 89af347bb..14984dac7 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx
@@ -33,7 +33,7 @@ import { LanguageEditorContext } from './use-language-editor-context';
 
 const emptyUiTranslation = createEmptyUiTranslation();
 
-const LanguageDetails = () => {
+function LanguageDetails() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data: signInExperience } = useSWR<SignInExperience, RequestError>('api/sign-in-exp');
   const { languages } = useUiLanguages();
@@ -270,6 +270,6 @@ const LanguageDetails = () => {
       </ConfirmModal>
     </div>
   );
-};
+}
 
 export default LanguageDetails;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageItem.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageItem.tsx
index d1a7d9772..f8c50bb59 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageItem.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageItem.tsx
@@ -13,7 +13,7 @@ type Props = {
   onClick: () => void;
 };
 
-const LanguageItem = ({ languageTag, isSelected, onClick }: Props) => {
+function LanguageItem({ languageTag, isSelected, onClick }: Props) {
   const itemRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -43,6 +43,6 @@ const LanguageItem = ({ languageTag, isSelected, onClick }: Props) => {
       <div className={style.languageTag}>{languageTag}</div>
     </div>
   );
-};
+}
 
 export default LanguageItem;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageNav.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageNav.tsx
index 340af4bea..a8afddc25 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageNav.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageNav.tsx
@@ -9,7 +9,7 @@ import LanguageItem from './LanguageItem';
 import * as style from './LanguageNav.module.scss';
 import { LanguageEditorContext } from './use-language-editor-context';
 
-const LanguageNav = () => {
+function LanguageNav() {
   const { languages, addLanguage } = useUiLanguages();
 
   const {
@@ -66,6 +66,6 @@ const LanguageNav = () => {
       </div>
     </div>
   );
-};
+}
 
 export default LanguageNav;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx
index 15e24a1dc..21f46864b 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx
@@ -19,7 +19,7 @@ type Props = {
   onClose: () => void;
 };
 
-const LanguageEditorModal = ({ isOpen, onClose }: Props) => {
+function LanguageEditorModal({ isOpen, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { languages, addLanguage } = useUiLanguages();
 
@@ -106,9 +106,9 @@ const LanguageEditorModal = ({ isOpen, onClose }: Props) => {
       </ConfirmModal>
     </Modal>
   );
-};
+}
 
-const LanguageEditor = (props: Props) => {
+function LanguageEditor(props: Props) {
   const { context: languageEditorContext, Provider: LanguageEditorContextProvider } =
     useLanguageEditorContext();
 
@@ -117,6 +117,6 @@ const LanguageEditor = (props: Props) => {
       <LanguageEditorModal {...props} />
     </LanguageEditorContextProvider>
   );
-};
+}
 
 export default LanguageEditor;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/ManageLanguageButton.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/ManageLanguageButton.tsx
index 84cf838d2..7b983af17 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/ManageLanguageButton.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/ManageLanguageButton.tsx
@@ -8,7 +8,7 @@ type Props = {
   className?: string;
 };
 
-const ManageLanguageButton = ({ className }: Props) => {
+function ManageLanguageButton({ className }: Props) {
   const [isLanguageEditorOpen, setIsLanguageEditorOpen] = useState(false);
 
   return (
@@ -30,6 +30,6 @@ const ManageLanguageButton = ({ className }: Props) => {
       />
     </>
   );
-};
+}
 
 export default ManageLanguageButton;
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/index.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/index.tsx
index c4cc546ca..470b2bddb 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/index.tsx
@@ -8,12 +8,14 @@ type Props = {
   isActive: boolean;
 };
 
-const Others = ({ isActive }: Props) => (
-  <TabWrapper isActive={isActive} className={styles.tabContent}>
-    <TermsForm />
-    <LanguagesForm isManageLanguageVisible />
-    <AuthenticationForm />
-  </TabWrapper>
-);
+function Others({ isActive }: Props) {
+  return (
+    <TabWrapper isActive={isActive} className={styles.tabContent}>
+      <TermsForm />
+      <LanguagesForm isManageLanguageVisible />
+      <AuthenticationForm />
+    </TabWrapper>
+  );
+}
 
 export default Others;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignInForm.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignInForm.tsx
index 25b5a3d6b..c177d5c01 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignInForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignInForm.tsx
@@ -6,7 +6,7 @@ import FormField from '@/components/FormField';
 import * as styles from '../index.module.scss';
 import SignInMethodEditBox from './components/SignInMethodEditBox';
 
-const SignInForm = () => {
+function SignInForm() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -20,6 +20,6 @@ const SignInForm = () => {
       </FormField>
     </Card>
   );
-};
+}
 
 export default SignInForm;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx
index 7c7ba40f0..6d6e4c724 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx
@@ -27,7 +27,7 @@ import {
   getSignInMethodVerificationCodeCheckState,
 } from './utils';
 
-const SignUpForm = () => {
+function SignUpForm() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     control,
@@ -209,6 +209,6 @@ const SignUpForm = () => {
       )}
     </Card>
   );
-};
+}
 
 export default SignUpForm;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SocialSignInForm.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SocialSignInForm.tsx
index 3e0137cb6..00d036a1e 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SocialSignInForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SocialSignInForm.tsx
@@ -8,7 +8,7 @@ import type { SignInExperienceForm } from '../../types';
 import * as styles from '../index.module.scss';
 import SocialConnectorEditBox from './components/SocialConnectorEditBox';
 
-const SocialSignInForm = () => {
+function SocialSignInForm() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { control } = useFormContext<SignInExperienceForm>();
 
@@ -33,6 +33,6 @@ const SocialSignInForm = () => {
       </FormField>
     </Card>
   );
-};
+}
 
 export default SocialSignInForm;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx
index 5555d17a9..eb1853c65 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx
@@ -10,7 +10,7 @@ type Props = {
   requiredConnectors: ConnectorType[];
 };
 
-const ConnectorSetupWarning = ({ requiredConnectors }: Props) => {
+function ConnectorSetupWarning({ requiredConnectors }: Props) {
   const { isConnectorTypeEnabled } = useEnabledConnectorTypes();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -43,6 +43,6 @@ const ConnectorSetupWarning = ({ requiredConnectors }: Props) => {
       ))}
     </>
   );
-};
+}
 
 export default ConnectorSetupWarning;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/AddButton.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/AddButton.tsx
index 7b21ea7d1..8426fb297 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/AddButton.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/AddButton.tsx
@@ -17,7 +17,7 @@ type Props = {
   hasSelectedIdentifiers: boolean;
 };
 
-const AddButton = ({ options, onSelected, hasSelectedIdentifiers }: Props) => {
+function AddButton({ options, onSelected, hasSelectedIdentifiers }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   if (options.length === 0) {
@@ -60,6 +60,6 @@ const AddButton = ({ options, onSelected, hasSelectedIdentifiers }: Props) => {
       ))}
     </ActionMenu>
   );
-};
+}
 
 export default AddButton;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/SignInMethodItem.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/SignInMethodItem.tsx
index dd9aa676c..e3b3847a2 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/SignInMethodItem.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/SignInMethodItem.tsx
@@ -32,7 +32,7 @@ type Props = {
   onDelete: () => void;
 };
 
-const SignInMethodItem = ({
+function SignInMethodItem({
   signInMethod: { identifier, password, verificationCode, isPasswordPrimary },
   isPasswordCheckable,
   isVerificationCodeCheckable,
@@ -43,7 +43,7 @@ const SignInMethodItem = ({
   onVerificationStateChange,
   onToggleVerificationPrimary,
   onDelete,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -116,6 +116,6 @@ const SignInMethodItem = ({
       <ConnectorSetupWarning requiredConnectors={requiredConnectors} />
     </div>
   );
-};
+}
 
 export default SignInMethodItem;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/index.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/index.tsx
index b41bfb8cc..8d4c7f0c2 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/index.tsx
@@ -18,7 +18,7 @@ import AddButton from './AddButton';
 import SignInMethodItem from './SignInMethodItem';
 import * as styles from './index.module.scss';
 
-const SignInMethodEditBox = () => {
+function SignInMethodEditBox() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     control,
@@ -148,6 +148,6 @@ const SignInMethodEditBox = () => {
       />
     </div>
   );
-};
+}
 
 export default SignInMethodEditBox;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/AddButton.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/AddButton.tsx
index f3edd9e77..04de50b46 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/AddButton.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/AddButton.tsx
@@ -18,7 +18,7 @@ type Props = {
   hasSelectedConnectors: boolean;
 };
 
-const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
+function AddButton({ options, onSelected, hasSelectedConnectors }: Props) {
   if (options.length === 0) {
     return null;
   }
@@ -66,6 +66,6 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
       ))}
     </ActionMenu>
   );
-};
+}
 
 export default AddButton;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/SelectedConnectorItem.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/SelectedConnectorItem.tsx
index cd55c6eb0..39eaf7ec5 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/SelectedConnectorItem.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/SelectedConnectorItem.tsx
@@ -13,10 +13,10 @@ type Props = {
   onDelete: (connectorTarget: string) => void;
 };
 
-const SelectedConnectorItem = ({
+function SelectedConnectorItem({
   data: { logo, logoDark, target, name, connectors },
   onDelete,
-}: Props) => {
+}: Props) {
   return (
     <div className={styles.item}>
       <div className={styles.info}>
@@ -39,6 +39,6 @@ const SelectedConnectorItem = ({
       </IconButton>
     </div>
   );
-};
+}
 
 export default SelectedConnectorItem;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.tsx
index 49c065354..47ec87eaa 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   onChange: (value: string[]) => void;
 };
 
-const SocialConnectorEditBox = ({ value, onChange }: Props) => {
+function SocialConnectorEditBox({ value, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data: connectorData, error } = useConnectorGroups();
 
@@ -93,6 +93,6 @@ const SocialConnectorEditBox = ({ value, onChange }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default SocialConnectorEditBox;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/index.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/index.tsx
index 78e496bed..f986ddb8b 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/index.tsx
@@ -8,12 +8,14 @@ type Props = {
   isActive: boolean;
 };
 
-const SignUpAndSignIn = ({ isActive }: Props) => (
-  <TabWrapper isActive={isActive} className={styles.tabContent}>
-    <SignUpForm />
-    <SignInForm />
-    <SocialSignInForm />
-  </TabWrapper>
-);
+function SignUpAndSignIn({ isActive }: Props) {
+  return (
+    <TabWrapper isActive={isActive} className={styles.tabContent}>
+      <SignUpForm />
+      <SignInForm />
+      <SocialSignInForm />
+    </TabWrapper>
+  );
+}
 
 export default SignUpAndSignIn;
diff --git a/packages/console/src/pages/UserDetails/UserLogs/index.tsx b/packages/console/src/pages/UserDetails/UserLogs/index.tsx
index 1b02f4951..3a778a08c 100644
--- a/packages/console/src/pages/UserDetails/UserLogs/index.tsx
+++ b/packages/console/src/pages/UserDetails/UserLogs/index.tsx
@@ -5,12 +5,12 @@ import AuditLogTable from '@/components/AuditLogTable';
 import type { UserDetailsOutletContext } from '../types';
 import * as styles from './index.module.scss';
 
-const UserLogs = () => {
+function UserLogs() {
   const {
     user: { id },
   } = useOutletContext<UserDetailsOutletContext>();
 
   return <AuditLogTable userId={id} className={styles.logs} />;
-};
+}
 
 export default UserLogs;
diff --git a/packages/console/src/pages/UserDetails/UserRoles/components/AssignRolesModal/index.tsx b/packages/console/src/pages/UserDetails/UserRoles/components/AssignRolesModal/index.tsx
index b2b1d2885..98e497426 100644
--- a/packages/console/src/pages/UserDetails/UserRoles/components/AssignRolesModal/index.tsx
+++ b/packages/console/src/pages/UserDetails/UserRoles/components/AssignRolesModal/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   onClose: (success?: boolean) => void;
 };
 
-const AssignRolesModal = ({ user, onClose }: Props) => {
+function AssignRolesModal({ user, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const userName = user.name ?? t('users.unnamed');
@@ -85,6 +85,6 @@ const AssignRolesModal = ({ user, onClose }: Props) => {
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default AssignRolesModal;
diff --git a/packages/console/src/pages/UserDetails/UserRoles/index.tsx b/packages/console/src/pages/UserDetails/UserRoles/index.tsx
index b898b193f..272caf924 100644
--- a/packages/console/src/pages/UserDetails/UserRoles/index.tsx
+++ b/packages/console/src/pages/UserDetails/UserRoles/index.tsx
@@ -28,7 +28,7 @@ import * as styles from './index.module.scss';
 
 const pageSize = defaultPageSize;
 
-const UserRoles = () => {
+function UserRoles() {
   const { user } = useOutletContext<UserDetailsOutletContext>();
   const { id: userId } = user;
 
@@ -177,6 +177,6 @@ const UserRoles = () => {
       )}
     </>
   );
-};
+}
 
 export default UserRoles;
diff --git a/packages/console/src/pages/UserDetails/UserSettings/components/UserSocialIdentities/index.tsx b/packages/console/src/pages/UserDetails/UserSettings/components/UserSocialIdentities/index.tsx
index 2dc1bfabd..50052d91c 100644
--- a/packages/console/src/pages/UserDetails/UserSettings/components/UserSocialIdentities/index.tsx
+++ b/packages/console/src/pages/UserDetails/UserSettings/components/UserSocialIdentities/index.tsx
@@ -28,10 +28,11 @@ type DisplayConnector = {
   name: ConnectorResponse['name'] | string;
 };
 
-const ConnectorName = ({ name }: { name: DisplayConnector['name'] }) =>
-  typeof name === 'string' ? <span>{name}</span> : <UnnamedTrans resource={name} />;
+function ConnectorName({ name }: { name: DisplayConnector['name'] }) {
+  return typeof name === 'string' ? <span>{name}</span> : <UnnamedTrans resource={name} />;
+}
 
-const UserSocialIdentities = ({ userId, identities, onDelete }: Props) => {
+function UserSocialIdentities({ userId, identities, onDelete }: Props) {
   const api = useApi();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data, error, mutate } = useSWR<ConnectorResponse[], RequestError>('api/connectors');
@@ -157,6 +158,6 @@ const UserSocialIdentities = ({ userId, identities, onDelete }: Props) => {
       </DeleteConfirmModal>
     </div>
   );
-};
+}
 
 export default UserSocialIdentities;
diff --git a/packages/console/src/pages/UserDetails/UserSettings/index.tsx b/packages/console/src/pages/UserDetails/UserSettings/index.tsx
index 72a189975..2b6ae190a 100644
--- a/packages/console/src/pages/UserDetails/UserSettings/index.tsx
+++ b/packages/console/src/pages/UserDetails/UserSettings/index.tsx
@@ -20,7 +20,7 @@ import type { UserDetailsForm, UserDetailsOutletContext } from '../types';
 import { userDetailsParser } from '../utils';
 import UserSocialIdentities from './components/UserSocialIdentities';
 
-const UserSettings = () => {
+function UserSettings() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { getDocumentationUrl } = useDocumentationUrl();
 
@@ -141,6 +141,6 @@ const UserSettings = () => {
       <UnsavedChangesAlertModal hasUnsavedChanges={!isDeleting && isDirty} />
     </>
   );
-};
+}
 
 export default UserSettings;
diff --git a/packages/console/src/pages/UserDetails/components/ResetPasswordForm/index.tsx b/packages/console/src/pages/UserDetails/components/ResetPasswordForm/index.tsx
index 2b516cb26..b7589b603 100644
--- a/packages/console/src/pages/UserDetails/components/ResetPasswordForm/index.tsx
+++ b/packages/console/src/pages/UserDetails/components/ResetPasswordForm/index.tsx
@@ -11,7 +11,7 @@ type Props = {
   onClose?: (password?: string) => void;
 };
 
-const ResetPasswordForm = ({ onClose, userId }: Props) => {
+function ResetPasswordForm({ onClose, userId }: Props) {
   const { t } = useTranslation(undefined, {
     keyPrefix: 'admin_console',
   });
@@ -39,6 +39,6 @@ const ResetPasswordForm = ({ onClose, userId }: Props) => {
       {t('user_details.reset_password.content')}
     </ConfirmModal>
   );
-};
+}
 
 export default ResetPasswordForm;
diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index 7cfdfb315..0c7373502 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@@ -32,7 +32,6 @@ import ResetPasswordForm from './components/ResetPasswordForm';
 import * as styles from './index.module.scss';
 import { UserDetailsOutletContext } from './types';
 
-// eslint-disable-next-line react/function-component-definition
 function UserDetails() {
   const { pathname } = useLocation();
   const isPageHasTable =
diff --git a/packages/console/src/pages/Users/components/CreateForm/index.tsx b/packages/console/src/pages/Users/components/CreateForm/index.tsx
index 2c77c0961..2f4acc68e 100644
--- a/packages/console/src/pages/Users/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Users/components/CreateForm/index.tsx
@@ -30,7 +30,7 @@ type Props = {
   onCreate: () => void;
 };
 
-const CreateForm = ({ onClose, onCreate }: Props) => {
+function CreateForm({ onClose, onCreate }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { search } = useLocation();
   const navigate = useNavigate();
@@ -123,6 +123,6 @@ const CreateForm = ({ onClose, onCreate }: Props) => {
       </ModalLayout>
     </Modal>
   );
-};
+}
 
 export default CreateForm;
diff --git a/packages/console/src/pages/Users/index.tsx b/packages/console/src/pages/Users/index.tsx
index fd417ad12..b1de6592e 100644
--- a/packages/console/src/pages/Users/index.tsx
+++ b/packages/console/src/pages/Users/index.tsx
@@ -32,7 +32,6 @@ const usersPathname = '/users';
 const createUserPathname = `${usersPathname}/create`;
 const buildDetailsPathname = (id: string) => `${usersPathname}/${id}/${UserDetailsTabs.Settings}`;
 
-// eslint-disable-next-line react/function-component-definition
 function Users() {
   const { pathname, search } = useLocation();
   const isCreateNew = pathname === createUserPathname;
diff --git a/packages/console/src/pages/Welcome/index.tsx b/packages/console/src/pages/Welcome/index.tsx
index 8dfe6c846..531c640e1 100644
--- a/packages/console/src/pages/Welcome/index.tsx
+++ b/packages/console/src/pages/Welcome/index.tsx
@@ -12,7 +12,7 @@ import useTheme from '@/hooks/use-theme';
 
 import * as styles from './index.module.scss';
 
-const Welcome = () => {
+function Welcome() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
   const { isAuthenticated, error, signIn } = useLogto();
@@ -58,6 +58,6 @@ const Welcome = () => {
       </main>
     </div>
   );
-};
+}
 
 export default Welcome;