From bb469494f08917782d22d7672d7dcdf5c450c9e4 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 2 Jun 2026 22:21:14 -0300
Subject: [PATCH] refactor(ui-client): remove unnecessary ReactElement type
 annotations from components

---
 .../src/components/Contextualbar/ContextualbarBack.tsx   | 4 ++--
 .../src/components/Contextualbar/ContextualbarClose.tsx  | 4 ++--
 .../Contextualbar/ContextualbarInnerContent.tsx          | 4 ++--
 .../Contextualbar/ContextualbarSkeletonBody.tsx          | 3 +--
 .../src/components/CustomScrollbars/CustomScrollbars.tsx | 4 ++--
 .../CustomScrollbars/CustomVirtuaScrollbars.tsx          | 4 ++--
 .../CustomScrollbars/VirtualizedScrollbars.tsx           | 2 +-
 .../components/GenericTable/GenericTableHeaderCell.tsx   | 4 ++--
 .../components/GenericTable/GenericTableLoadingRow.tsx   | 3 +--
 .../components/GenericTable/GenericTableLoadingTable.tsx | 4 +---
 packages/ui-client/src/components/Header/HeaderIcon.tsx  | 2 +-
 .../src/components/Header/HeaderTag/HeaderTagIcon.tsx    | 2 +-
 .../src/components/InfoPanel/InfoPanelAction.tsx         | 4 ++--
 .../components/Modal/GenericModal/GenericModal.spec.tsx  | 4 ++--
 .../src/components/Modal/GenericModal/GenericModal.tsx   | 4 ++--
 .../components/Modal/GenericModal/withDoNotAskAgain.tsx  | 9 +++------
 .../ui-client/src/components/Modal/ModalBackdrop.tsx     | 4 ++--
 .../src/providers/ModalProvider/ModalProvider.spec.tsx   | 4 ++--
 packages/ui-client/src/providers/TooltipProvider.tsx     | 2 +-
 .../ui-client/src/views/setupWizard/SetupWizardPage.tsx  | 4 +---
 .../ui-client/src/views/setupWizard/SetupWizardRoute.tsx | 3 +--
 .../views/setupWizard/providers/SetupWizardProvider.tsx  | 8 ++++++--
 .../src/views/setupWizard/steps/AdminInfoStep.tsx        | 6 +++---
 .../views/setupWizard/steps/CloudAccountConfirmation.tsx | 3 +--
 .../src/views/setupWizard/steps/OrganizationInfoStep.tsx | 4 ++--
 .../src/views/setupWizard/steps/RegisterServerStep.tsx   | 4 ++--
 26 files changed, 48 insertions(+), 55 deletions(-)

diff --git a/packages/ui-client/src/components/Contextualbar/ContextualbarBack.tsx b/packages/ui-client/src/components/Contextualbar/ContextualbarBack.tsx
index 7c03e574b0e81..16aface5fd83e 100644
--- a/packages/ui-client/src/components/Contextualbar/ContextualbarBack.tsx
+++ b/packages/ui-client/src/components/Contextualbar/ContextualbarBack.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement, ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -6,7 +6,7 @@ import ContextualbarAction from './ContextualbarAction';
 
 type ContextualbarBackProps = Partial<ComponentProps<typeof ContextualbarAction>>;
 
-const ContextualbarBack = (props: ContextualbarBackProps): ReactElement => {
+const ContextualbarBack = (props: ContextualbarBackProps) => {
 	const { t } = useTranslation();
 	return <ContextualbarAction {...props} title={t('Back')} name='arrow-back' />;
 };
diff --git a/packages/ui-client/src/components/Contextualbar/ContextualbarClose.tsx b/packages/ui-client/src/components/Contextualbar/ContextualbarClose.tsx
index 4104a1c28cd72..d06e901424bda 100644
--- a/packages/ui-client/src/components/Contextualbar/ContextualbarClose.tsx
+++ b/packages/ui-client/src/components/Contextualbar/ContextualbarClose.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -6,7 +6,7 @@ import ContextualbarAction from './ContextualbarAction';
 
 type ContextualbarCloseProps = Partial<ComponentProps<typeof ContextualbarAction>>;
 
-const ContextualbarClose = (props: ContextualbarCloseProps): ReactElement => {
+const ContextualbarClose = (props: ContextualbarCloseProps) => {
 	const { t } = useTranslation();
 	return <ContextualbarAction data-qa='ContextualbarActionClose' {...props} aria-label={t('Close')} name='cross' />;
 };
diff --git a/packages/ui-client/src/components/Contextualbar/ContextualbarInnerContent.tsx b/packages/ui-client/src/components/Contextualbar/ContextualbarInnerContent.tsx
index 8612f8197f740..f0ee215ad5305 100644
--- a/packages/ui-client/src/components/Contextualbar/ContextualbarInnerContent.tsx
+++ b/packages/ui-client/src/components/Contextualbar/ContextualbarInnerContent.tsx
@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement, ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { memo } from 'react';
 
-const ContextualbarInnerContent = (props: ComponentProps<typeof Box>): ReactElement => (
+const ContextualbarInnerContent = (props: ComponentProps<typeof Box>) => (
 	<Box rcx-vertical-bar--inner-content position='absolute' height='full' display='flex' insetInline={0} {...props} />
 );
 
diff --git a/packages/ui-client/src/components/Contextualbar/ContextualbarSkeletonBody.tsx b/packages/ui-client/src/components/Contextualbar/ContextualbarSkeletonBody.tsx
index 6d0b09552e68c..9c150bc7cbf18 100644
--- a/packages/ui-client/src/components/Contextualbar/ContextualbarSkeletonBody.tsx
+++ b/packages/ui-client/src/components/Contextualbar/ContextualbarSkeletonBody.tsx
@@ -1,9 +1,8 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
 
 import ContextualbarHeader from './ContextualbarHeader';
 
-const ContextualbarSkeletonBody = (): ReactElement => (
+const ContextualbarSkeletonBody = () => (
 	<>
 		<ContextualbarHeader>
 			<Skeleton width='100%' />
diff --git a/packages/ui-client/src/components/CustomScrollbars/CustomScrollbars.tsx b/packages/ui-client/src/components/CustomScrollbars/CustomScrollbars.tsx
index f2aab56959cd8..36eaec254ed36 100644
--- a/packages/ui-client/src/components/CustomScrollbars/CustomScrollbars.tsx
+++ b/packages/ui-client/src/components/CustomScrollbars/CustomScrollbars.tsx
@@ -1,12 +1,12 @@
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
-import type { HTMLAttributes, ReactElement } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import { useEffect, useRef, forwardRef, memo } from 'react';
 
 import type { OverlayScrollbars } from '.';
 import BaseScrollbars, { getScrollbarsOptions } from './BaseScrollbars';
 
 type CustomScrollbarsProps = {
-	children: ReactElement;
+	children: ReactNode;
 	overflowX?: boolean;
 	onScroll?: (args: OverlayScrollbars) => void;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'is' | 'onScroll'>;
diff --git a/packages/ui-client/src/components/CustomScrollbars/CustomVirtuaScrollbars.tsx b/packages/ui-client/src/components/CustomScrollbars/CustomVirtuaScrollbars.tsx
index 72bb5d9fc5ef2..4e257d5cd24d1 100644
--- a/packages/ui-client/src/components/CustomScrollbars/CustomVirtuaScrollbars.tsx
+++ b/packages/ui-client/src/components/CustomScrollbars/CustomVirtuaScrollbars.tsx
@@ -1,11 +1,11 @@
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
-import type { HTMLAttributes, ReactElement } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import { useEffect, memo, forwardRef, useRef } from 'react';
 
 import BaseScrollbars from './BaseScrollbars';
 
 type CustomScrollbarsProps = {
-	children: ReactElement;
+	children: ReactNode;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'is' | 'onScroll'>;
 
 const CustomVirtuaScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function CustomScrollbars({ ...props }, ref) {
diff --git a/packages/ui-client/src/components/CustomScrollbars/VirtualizedScrollbars.tsx b/packages/ui-client/src/components/CustomScrollbars/VirtualizedScrollbars.tsx
index 2ddde3b87c13c..7b0cfada94c85 100644
--- a/packages/ui-client/src/components/CustomScrollbars/VirtualizedScrollbars.tsx
+++ b/packages/ui-client/src/components/CustomScrollbars/VirtualizedScrollbars.tsx
@@ -6,7 +6,7 @@ import BaseScrollbars, { getScrollbarsOptions } from './BaseScrollbars';
 
 type VirtualizedScrollbarsProps = {
 	overflowX?: boolean;
-	children: ReactElement;
+	children: ReactElement<any>;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'is'>;
 
 const VirtualizedScrollbars = forwardRef<HTMLElement, VirtualizedScrollbarsProps>(function VirtualizedScrollbars(
diff --git a/packages/ui-client/src/components/GenericTable/GenericTableHeaderCell.tsx b/packages/ui-client/src/components/GenericTable/GenericTableHeaderCell.tsx
index bf66b69f513bf..e74ba87edc36a 100644
--- a/packages/ui-client/src/components/GenericTable/GenericTableHeaderCell.tsx
+++ b/packages/ui-client/src/components/GenericTable/GenericTableHeaderCell.tsx
@@ -1,5 +1,5 @@
 import { Box, TableCell } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 import { useCallback } from 'react';
 
 import SortIcon from './SortIcon';
@@ -18,7 +18,7 @@ export const GenericTableHeaderCell = <T extends string = string>({
 	sort,
 	onClick,
 	...props
-}: GenericTableHeaderCellProps<T>): ReactElement => {
+}: GenericTableHeaderCellProps<T>) => {
 	const fn = useCallback(() => onClick && sort && onClick(sort), [sort, onClick]);
 	return (
 		<TableCell clickable={!!sort} onClick={fn} {...props}>
diff --git a/packages/ui-client/src/components/GenericTable/GenericTableLoadingRow.tsx b/packages/ui-client/src/components/GenericTable/GenericTableLoadingRow.tsx
index e544fba33ed08..6642261115b61 100644
--- a/packages/ui-client/src/components/GenericTable/GenericTableLoadingRow.tsx
+++ b/packages/ui-client/src/components/GenericTable/GenericTableLoadingRow.tsx
@@ -1,7 +1,6 @@
 import { Box, Skeleton, TableRow, TableCell } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
 
-export const GenericTableLoadingRow = ({ cols }: { cols: number }): ReactElement => (
+export const GenericTableLoadingRow = ({ cols }: { cols: number }) => (
 	<TableRow>
 		<TableCell>
 			<Box display='flex'>
diff --git a/packages/ui-client/src/components/GenericTable/GenericTableLoadingTable.tsx b/packages/ui-client/src/components/GenericTable/GenericTableLoadingTable.tsx
index 6155090f5d5fc..55af6b268938d 100644
--- a/packages/ui-client/src/components/GenericTable/GenericTableLoadingTable.tsx
+++ b/packages/ui-client/src/components/GenericTable/GenericTableLoadingTable.tsx
@@ -1,8 +1,6 @@
-import type { ReactElement } from 'react';
-
 import { GenericTableLoadingRow } from './GenericTableLoadingRow';
 
-export const GenericTableLoadingTable = ({ headerCells }: { headerCells: number }): ReactElement => (
+export const GenericTableLoadingTable = ({ headerCells }: { headerCells: number }) => (
 	<>
 		{Array.from({ length: 10 }, (_, i) => (
 			<GenericTableLoadingRow key={i} cols={headerCells} />
diff --git a/packages/ui-client/src/components/Header/HeaderIcon.tsx b/packages/ui-client/src/components/Header/HeaderIcon.tsx
index 9175b66257d32..767ee621027d1 100644
--- a/packages/ui-client/src/components/Header/HeaderIcon.tsx
+++ b/packages/ui-client/src/components/Header/HeaderIcon.tsx
@@ -2,7 +2,7 @@ import { Box, Icon } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { isValidElement } from 'react';
 
-type HeaderIconProps = { icon: ReactElement | ComponentPropsWithoutRef<typeof Icon> | null };
+type HeaderIconProps = { icon: ReactElement<any> | ComponentPropsWithoutRef<typeof Icon> | null };
 
 const HeaderIcon = ({ icon }: HeaderIconProps) =>
 	icon && (
diff --git a/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx b/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx
index 3f46570719498..262c3df71b864 100644
--- a/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx
@@ -3,7 +3,7 @@ import type { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { isValidElement } from 'react';
 
 type HeaderIconProps = {
-	icon: ReactElement | Pick<ComponentPropsWithoutRef<typeof Icon>, 'name' | 'color'> | null;
+	icon: ReactElement<any> | Pick<ComponentPropsWithoutRef<typeof Icon>, 'name' | 'color'> | null;
 };
 
 const HeaderTagIcon = ({ icon }: HeaderIconProps) => {
diff --git a/packages/ui-client/src/components/InfoPanel/InfoPanelAction.tsx b/packages/ui-client/src/components/InfoPanel/InfoPanelAction.tsx
index 0959c70df1f32..34c4d5a4802e8 100644
--- a/packages/ui-client/src/components/InfoPanel/InfoPanelAction.tsx
+++ b/packages/ui-client/src/components/InfoPanel/InfoPanelAction.tsx
@@ -1,13 +1,13 @@
 import { Button } from '@rocket.chat/fuselage';
 import type { Keys as IconName } from '@rocket.chat/icons';
-import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 
 type InfoPanelActionProps = Omit<ComponentProps<typeof Button>, 'label'> & {
 	icon?: IconName;
 	label: ReactNode;
 };
 
-const InfoPanelAction = ({ label, icon, ...props }: InfoPanelActionProps): ReactElement => (
+const InfoPanelAction = ({ label, icon, ...props }: InfoPanelActionProps) => (
 	<Button
 		title={typeof label === 'string' ? label : undefined}
 		aria-label={typeof label === 'string' ? label : undefined}
diff --git a/packages/ui-client/src/components/Modal/GenericModal/GenericModal.spec.tsx b/packages/ui-client/src/components/Modal/GenericModal/GenericModal.spec.tsx
index 69aafd9ea8499..cbc3ed30042fb 100644
--- a/packages/ui-client/src/components/Modal/GenericModal/GenericModal.spec.tsx
+++ b/packages/ui-client/src/components/Modal/GenericModal/GenericModal.spec.tsx
@@ -3,13 +3,13 @@ import { useSetModal } from '@rocket.chat/ui-contexts';
 import { act, screen, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
-import type { ReactElement } from 'react';
+import type { ReactNode } from 'react';
 import { Suspense } from 'react';
 
 import GenericModal from './GenericModal';
 import ModalProviderWithRegion from '../../../providers/ModalProvider/ModalProviderWithRegion';
 
-const renderModal = (modalElement: ReactElement) => {
+const renderModal = (modalElement: ReactNode) => {
 	const {
 		result: { current: setModal },
 	} = renderHook(() => useSetModal(), {
diff --git a/packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx b/packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx
index 980d365ed09cf..19ac8d62bf7e0 100644
--- a/packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx
+++ b/packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx
@@ -29,8 +29,8 @@ type GenericModalProps = RequiredModalProps & {
 	children?: ReactNode;
 	cancelText?: ReactNode;
 	confirmText?: ReactNode;
-	title?: string | ReactElement;
-	icon?: IconName | ReactElement | null;
+	title?: string | ReactElement<any>;
+	icon?: IconName | ReactElement<any> | null;
 	confirmDisabled?: boolean;
 	confirmLoading?: boolean;
 	tagline?: ReactNode;
diff --git a/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx b/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx
index 86e73bd53730b..b745777324362 100644
--- a/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx
+++ b/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx
@@ -1,6 +1,6 @@
 import { Box, Label, CheckBox } from '@rocket.chat/fuselage';
 import { useUserPreference, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ComponentType } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import { useId, useState } from 'react';
 
 import type { DontAskAgainList } from '../../../hooks/useDontAskAgain';
@@ -15,13 +15,10 @@ type DoNotAskAgainProps = {
 
 export type RequiredModalProps = {
 	onConfirm?: (...args: any) => Promise<void> | void;
-	dontAskAgain?: ReactElement;
+	dontAskAgain?: ReactNode;
 };
 
-function withDoNotAskAgain<T extends RequiredModalProps>(
-	// eslint-disable-next-line @typescript-eslint/naming-convention
-	Component: ComponentType<any>,
-) {
+function withDoNotAskAgain<T extends RequiredModalProps>(Component: ComponentType<any>) {
 	type WrappedComponentProps = DoNotAskAgainProps & Omit<T, keyof RequiredModalProps>;
 	const WrappedComponent = function ({ onConfirm, dontAskAgain, ...props }: WrappedComponentProps) {
 		const t = useTranslation();
diff --git a/packages/ui-client/src/components/Modal/ModalBackdrop.tsx b/packages/ui-client/src/components/Modal/ModalBackdrop.tsx
index 9ae1b9cacdc92..0e6aea745ab20 100644
--- a/packages/ui-client/src/components/Modal/ModalBackdrop.tsx
+++ b/packages/ui-client/src/components/Modal/ModalBackdrop.tsx
@@ -21,14 +21,14 @@ const useEscapeKey = (onDismiss: (() => void) | undefined): void => {
 	}, [onDismiss]);
 };
 
-const isAtBackdropChildren = (e: MouseEvent, ref: RefObject<HTMLElement>): boolean => {
+const isAtBackdropChildren = (e: MouseEvent, ref: RefObject<HTMLElement | null>): boolean => {
 	const backdrop = ref.current;
 	const { parentElement } = e.target as HTMLElement;
 
 	return (Boolean(parentElement) && backdrop?.contains(parentElement)) ?? false;
 };
 
-const useOutsideClick = (ref: RefObject<HTMLElement>, onDismiss: (() => void) | undefined) => {
+const useOutsideClick = (ref: RefObject<HTMLElement | null>, onDismiss: (() => void) | undefined) => {
 	const hasClicked = useRef<boolean>(false);
 
 	const onMouseDown = useCallback(
diff --git a/packages/ui-client/src/providers/ModalProvider/ModalProvider.spec.tsx b/packages/ui-client/src/providers/ModalProvider/ModalProvider.spec.tsx
index 8236cdcbf6ff5..0e6585ef99c9e 100644
--- a/packages/ui-client/src/providers/ModalProvider/ModalProvider.spec.tsx
+++ b/packages/ui-client/src/providers/ModalProvider/ModalProvider.spec.tsx
@@ -1,7 +1,7 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { useSetModal } from '@rocket.chat/ui-contexts';
 import { act, render, screen } from '@testing-library/react';
-import type { ForwardedRef, ReactElement } from 'react';
+import type { ForwardedRef, ReactNode } from 'react';
 import { Suspense, createContext, createRef, forwardRef, useContext, useImperativeHandle } from 'react';
 
 import ModalProvider from './ModalProvider';
@@ -10,7 +10,7 @@ import GenericModal from '../../components/Modal/GenericModal';
 import ModalRegion from '../../components/Modal/ModalRegion';
 import { imperativeModal } from '../../helpers/imperativeModal';
 
-const renderWithSuspense = (ui: ReactElement) =>
+const renderWithSuspense = (ui: ReactNode) =>
 	render(ui, {
 		wrapper: mockAppRoot()
 			.wrap((children) => <Suspense fallback={null}>{children}</Suspense>)
diff --git a/packages/ui-client/src/providers/TooltipProvider.tsx b/packages/ui-client/src/providers/TooltipProvider.tsx
index 8f3808efb16c5..8f813ccf281cc 100644
--- a/packages/ui-client/src/providers/TooltipProvider.tsx
+++ b/packages/ui-client/src/providers/TooltipProvider.tsx
@@ -11,7 +11,7 @@ type TooltipProviderProps = {
 };
 
 const TooltipProvider = ({ children, ownerDocument = window.document }: TooltipProviderProps) => {
-	const lastAnchor = useRef<HTMLElement>();
+	const lastAnchor = useRef<HTMLElement>(undefined);
 	const hasHover = !useMediaQuery('(hover: none)');
 
 	const [tooltip, setTooltip] = useDebouncedState<ReactNode>(null, 300);
diff --git a/packages/ui-client/src/views/setupWizard/SetupWizardPage.tsx b/packages/ui-client/src/views/setupWizard/SetupWizardPage.tsx
index 5610bf1a473a4..cf178cbf2a9db 100644
--- a/packages/ui-client/src/views/setupWizard/SetupWizardPage.tsx
+++ b/packages/ui-client/src/views/setupWizard/SetupWizardPage.tsx
@@ -1,12 +1,10 @@
-import type { ReactElement } from 'react';
-
 import { useSetupWizardContext } from './contexts/SetupWizardContext';
 import AdminInfoStep from './steps/AdminInfoStep';
 import CloudAccountConfirmation from './steps/CloudAccountConfirmation';
 import OrganizationInfoStep from './steps/OrganizationInfoStep';
 import RegisterServerStep from './steps/RegisterServerStep';
 
-const SetupWizardPage = (): ReactElement => {
+const SetupWizardPage = () => {
 	const { currentStep } = useSetupWizardContext();
 
 	switch (currentStep) {
diff --git a/packages/ui-client/src/views/setupWizard/SetupWizardRoute.tsx b/packages/ui-client/src/views/setupWizard/SetupWizardRoute.tsx
index c4d6188314f77..c2fc9ece4697c 100644
--- a/packages/ui-client/src/views/setupWizard/SetupWizardRoute.tsx
+++ b/packages/ui-client/src/views/setupWizard/SetupWizardRoute.tsx
@@ -1,6 +1,5 @@
 import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import { DarkModeProvider } from '@rocket.chat/layout';
-import type { ReactElement } from 'react';
 
 import SetupWizardPage from './SetupWizardPage';
 import { useBodyPosition } from './hooks/useBodyPosition';
@@ -8,7 +7,7 @@ import { useRouteLock } from './hooks/useRouteLock';
 import SetupWizardProvider from './providers/SetupWizardProvider';
 import { ModalRegion } from '../../components';
 
-export const SetupWizardRoute = (): ReactElement | null => {
+export const SetupWizardRoute = () => {
 	const locked = useRouteLock();
 	const breakpoints = useBreakpoints();
 	const isMobile = !breakpoints.includes('md');
diff --git a/packages/ui-client/src/views/setupWizard/providers/SetupWizardProvider.tsx b/packages/ui-client/src/views/setupWizard/providers/SetupWizardProvider.tsx
index 74b58c4931cda..682ed031d775c 100644
--- a/packages/ui-client/src/views/setupWizard/providers/SetupWizardProvider.tsx
+++ b/packages/ui-client/src/views/setupWizard/providers/SetupWizardProvider.tsx
@@ -11,7 +11,7 @@ import {
 	useTranslation,
 } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
-import type { ReactElement, ContextType } from 'react';
+import type { ContextType, ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
 import { useInvalidateLicense } from '../../../hooks';
@@ -37,7 +37,11 @@ const initialData: ContextType<typeof SetupWizardContext>['setupWizardData'] = {
 
 type HandleRegisterServer = (params: { email: string; resend?: boolean }) => Promise<void>;
 
-const SetupWizardProvider = ({ children }: { children: ReactElement }): ReactElement => {
+type SetupWizardProviderProps = {
+	children: ReactNode;
+};
+
+const SetupWizardProvider = ({ children }: SetupWizardProviderProps) => {
 	const invalidateLicenseQuery = useInvalidateLicense();
 	const t = useTranslation();
 	const [setupWizardData, setSetupWizardData] = useState<ContextType<typeof SetupWizardContext>['setupWizardData']>(initialData);
diff --git a/packages/ui-client/src/views/setupWizard/steps/AdminInfoStep.tsx b/packages/ui-client/src/views/setupWizard/steps/AdminInfoStep.tsx
index a3ab153f32ea6..1c0a5ee11e720 100644
--- a/packages/ui-client/src/views/setupWizard/steps/AdminInfoStep.tsx
+++ b/packages/ui-client/src/views/setupWizard/steps/AdminInfoStep.tsx
@@ -1,7 +1,7 @@
 import { AdminInfoPage } from '@rocket.chat/onboarding-ui';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
 import { useSetting, useVerifyPassword, usePasswordPolicy, usePasswordPolicyOptions } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { useMemo } from 'react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 
@@ -12,9 +12,9 @@ const usernameBlackList = ['all', 'here', 'admin'].map(toRegExp);
 const hasBlockedName = (username: string): boolean =>
 	!!usernameBlackList.length && usernameBlackList.some((restrictedUsername) => restrictedUsername.test(escapeRegExp(username).trim()));
 
-const AdminInfoStep = (): ReactElement => {
+const AdminInfoStep = () => {
 	const { t, i18n } = useTranslation();
-	const regexpForUsernameValidation = useSetting('UTF8_User_Names_Validation');
+	const regexpForUsernameValidation = useSetting('UTF8_User_Names_Validation', '[0-9a-zA-Z-_.]+');
 	const usernameRegExp = new RegExp(`^${regexpForUsernameValidation}$`);
 
 	const { currentStep, validateEmail, registerAdminUser, maxSteps } = useSetupWizardContext();
diff --git a/packages/ui-client/src/views/setupWizard/steps/CloudAccountConfirmation.tsx b/packages/ui-client/src/views/setupWizard/steps/CloudAccountConfirmation.tsx
index 53c9b9acbadfd..ff10f1f4bc460 100644
--- a/packages/ui-client/src/views/setupWizard/steps/CloudAccountConfirmation.tsx
+++ b/packages/ui-client/src/views/setupWizard/steps/CloudAccountConfirmation.tsx
@@ -1,6 +1,5 @@
 import { AwaitingConfirmationPage } from '@rocket.chat/onboarding-ui';
 import { useToastMessageDispatch, useSettingSetValue, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { useEffect, useCallback } from 'react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 
@@ -8,7 +7,7 @@ import { useSetupWizardContext } from '../contexts/SetupWizardContext';
 
 const setIntervalTime = (interval?: number): number => (interval ? interval * 1000 : 0);
 
-const CloudAccountConfirmation = (): ReactElement => {
+const CloudAccountConfirmation = () => {
 	const {
 		registerServer,
 		currentStep,
diff --git a/packages/ui-client/src/views/setupWizard/steps/OrganizationInfoStep.tsx b/packages/ui-client/src/views/setupWizard/steps/OrganizationInfoStep.tsx
index 1f0633f195af8..d8a4d90c7f2f2 100644
--- a/packages/ui-client/src/views/setupWizard/steps/OrganizationInfoStep.tsx
+++ b/packages/ui-client/src/views/setupWizard/steps/OrganizationInfoStep.tsx
@@ -3,7 +3,7 @@ import { OrganizationInfoPage } from '@rocket.chat/onboarding-ui';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useRole } from '@rocket.chat/ui-contexts';
 import type { TFunction } from 'i18next';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 
 import { useSetupWizardContext } from '../contexts/SetupWizardContext';
@@ -26,7 +26,7 @@ const getSettingOptions = (
 	return setting.values.map(({ i18nLabel, key }) => [String(key), t(i18nLabel as TranslationKey)]);
 };
 
-const OrganizationInfoStep = (): ReactElement => {
+const OrganizationInfoStep = () => {
 	const { t, i18n } = useTranslation();
 	const hasAdminRole = useRole('admin');
 
diff --git a/packages/ui-client/src/views/setupWizard/steps/RegisterServerStep.tsx b/packages/ui-client/src/views/setupWizard/steps/RegisterServerStep.tsx
index 7f6c37f529100..94b35a722e226 100644
--- a/packages/ui-client/src/views/setupWizard/steps/RegisterServerStep.tsx
+++ b/packages/ui-client/src/views/setupWizard/steps/RegisterServerStep.tsx
@@ -1,7 +1,7 @@
 import { RegisterServerPage, RegisterOfflinePage } from '@rocket.chat/onboarding-ui';
 import { useEndpoint, useMethod, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import type { ReactElement, ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { useState } from 'react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 
@@ -14,7 +14,7 @@ const SERVER_OPTIONS = {
 	OFFLINE: 'OFFLINE',
 };
 
-const RegisterServerStep = (): ReactElement => {
+const RegisterServerStep = () => {
 	const { t, i18n } = useTranslation();
 	const { currentStep, goToNextStep, setSetupWizardData, registerServer, maxSteps, completeSetupWizard, saveAgreementData } =
 		useSetupWizardContext();