From fbafc281fbe12fd437d4e95ebf705a61a2e6250f Mon Sep 17 00:00:00 2001
From: Tasso <tasso.evangelista@rocket.chat>
Date: Tue, 13 Jan 2026 17:49:44 -0300
Subject: [PATCH] refactor(eslint): Enable `react/no-children-prop`

---
 .../meteor/client/components/PageSkeleton.tsx |  4 +-
 .../components/UserCard/UserCardRole.tsx      |  2 +-
 .../UserInfo/UserInfoABACAttribute.tsx        |  2 +-
 .../attachments/structure/AttachmentBlock.tsx |  5 +-
 .../client/portals/SidebarPortal/index.tsx    |  4 +-
 apps/meteor/client/providers/AppsProvider.tsx |  2 +-
 .../client/providers/AttachmentProvider.tsx   |  2 +-
 .../AuthenticationProvider.tsx                |  2 +-
 .../providers/AuthorizationProvider.tsx       |  2 +-
 .../client/providers/AvatarUrlProvider.tsx    |  2 +-
 .../CustomSoundProvider.tsx                   |  2 +-
 .../client/providers/LayoutProvider.tsx       |  5 +-
 .../client/providers/OmnichannelProvider.tsx  |  2 +-
 .../client/providers/RouterProvider.tsx       |  2 +-
 .../client/providers/ServerProvider.tsx       |  2 +-
 .../client/providers/SessionProvider.tsx      |  4 +-
 .../client/providers/SettingsProvider.tsx     |  2 +-
 .../providers/ToastMessagesProvider.tsx       |  4 +-
 .../client/providers/TranslationProvider.tsx  |  4 +-
 .../providers/UserProvider/UserProvider.tsx   |  2 +-
 .../FederatedRoomListErrorBoundary.tsx        |  5 +-
 .../client/sidebar/hooks/useRoomList.spec.tsx |  5 +-
 .../stories/contexts/ModalContextMock.tsx     |  2 +-
 .../stories/contexts/RouterContextMock.tsx    |  2 +-
 .../stories/contexts/ServerContextMock.tsx    |  2 +-
 .../contexts/TranslationContextMock.tsx       |  2 +-
 .../CustomUserStatusDisabledModal.tsx         | 16 +++----
 .../EngagementDashboardCardErrorBoundary.tsx  |  5 +-
 .../EngagementDashboardPage.stories.tsx       |  2 +-
 .../channels/ChannelsTab.stories.tsx          |  2 +-
 .../dataView/LegendSymbol.stories.tsx         |  2 +-
 .../messages/MessagesTab.stories.tsx          |  2 +-
 .../users/UsersTab.stories.tsx                |  2 +-
 .../views/admin/invites/InvitesPage.tsx       |  5 +-
 .../SettingsGroupPage/SettingsGroupPage.tsx   | 11 ++---
 .../SettingsSection/SettingsSection.tsx       | 11 ++---
 .../admin/settings/groups/LDAPGroupPage.tsx   | 12 +++--
 .../client/views/home/cards/AddUsersCard.tsx  |  6 ++-
 .../views/home/cards/CreateChannelsCard.tsx   |  6 ++-
 .../views/home/cards/DesktopAppsCard.tsx      | 12 +++--
 .../views/home/cards/DocumentationCard.tsx    |  6 ++-
 .../client/views/home/cards/JoinRoomsCard.tsx |  6 ++-
 .../views/home/cards/MobileAppsCard.tsx       |  8 +++-
 .../directory/providers/ChatsProvider.tsx     |  2 +-
 .../omnichannel/modals/ForwardChatModal.tsx   |  2 +-
 .../MessageList/MessageListErrorBoundary.tsx  |  5 +-
 .../hooks/useToggleFavoriteMutation.spec.tsx  |  2 +-
 .../DeleteMessageConfirmModal.tsx             |  5 +-
 .../room/providers/ComposerPopupProvider.tsx  |  2 +-
 .../root/MainLayout/AuthenticationCheck.tsx   |  2 +-
 .../views/root/MainLayout/LoginPage.tsx       |  2 +-
 .../tests/mocks/client/FakeChatProvider.tsx   |  5 +-
 .../tests/mocks/client/ModalContextMock.tsx   |  2 +-
 .../tests/mocks/client/ServerProviderMock.tsx |  2 +-
 apps/uikit-playground/.eslintrc.json          |  2 +
 apps/uikit-playground/package.json            |  1 +
 .../Components/Draggable/DraggableList.tsx    | 48 +++++++++----------
 .../Components/NavBar/BurgerIcon/Wrapper.tsx  |  5 +-
 .../Templates/Container/Container.tsx         |  2 +-
 .../Templates/Container/Section.tsx           |  4 +-
 .../src/Components/ToggleTabs/index.tsx       |  5 +-
 .../src/Components/navMenu/Menu/Wrapper.tsx   |  5 +-
 .../markup/blocks/OrderedListBlock.tsx        |  2 +-
 .../markup/blocks/ParagraphBlock.tsx          |  2 +-
 .../markup/blocks/UnorderedListBlock.tsx      |  2 +-
 .../markup/elements/BoldSpan.tsx              |  4 +-
 .../markup/elements/InlineElements.tsx        |  6 +--
 .../markup/elements/ItalicSpan.tsx            |  4 +-
 .../markup/elements/LinkSpan.tsx              |  9 ++--
 .../markup/elements/StrikeSpan.tsx            |  4 +-
 packages/eslint-config/react.js               |  1 +
 .../fuselage-ui-kit/.storybook/preview.tsx    |  2 +-
 packages/gazzodown/src/Markup.tsx             | 10 ++--
 packages/gazzodown/src/PreviewMarkup.tsx      |  8 ++--
 .../gazzodown/src/blocks/OrderedListBlock.tsx |  2 +-
 .../gazzodown/src/blocks/ParagraphBlock.tsx   |  2 +-
 packages/gazzodown/src/blocks/QuoteBlock.tsx  |  2 +-
 .../gazzodown/src/blocks/TaskListBlock.tsx    |  2 +-
 .../src/blocks/UnorderedListBlock.tsx         |  2 +-
 packages/gazzodown/src/elements/BoldSpan.tsx  |  4 +-
 .../gazzodown/src/elements/InlineElements.tsx | 10 ++--
 .../gazzodown/src/elements/ItalicSpan.tsx     |  4 +-
 packages/gazzodown/src/elements/LinkSpan.tsx  |  6 +--
 .../src/elements/PreviewInlineElements.tsx    | 14 +++---
 .../gazzodown/src/elements/StrikeSpan.tsx     |  4 +-
 .../src/katex/KatexErrorBoundary.tsx          |  6 ++-
 packages/livechat/.eslintrc.json              |  1 +
 .../Messages/MessageBlocks/stories.tsx        |  2 +-
 .../uiKit/message/ActionsBlock.stories.tsx    |  7 +--
 .../src/components/uiKit/message/Block.tsx    |  5 +-
 .../uiKit/message/ButtonElement/index.tsx     |  5 +-
 .../uiKit/message/ButtonElement/stories.tsx   |  5 +-
 .../uiKit/message/ContextBlock.stories.tsx    |  2 +-
 .../uiKit/message/DividerBlock.stories.tsx    |  2 +-
 .../uiKit/message/ImageBlock.stories.tsx      |  2 +-
 .../uiKit/message/ImageBlock/index.tsx        |  5 +-
 .../uiKit/message/SectionBlock.stories.tsx    |  9 ++--
 .../src/components/uiKit/message/Surface.tsx  |  5 +-
 .../livechat/src/providers/ServerProvider.tsx |  2 +-
 .../src/components/AnchorPortal.spec.tsx      | 36 +++++++++++---
 .../src/components/Modal/ModalBackdrop.tsx    |  5 +-
 .../src/components/Page/Page.stories.tsx      |  4 +-
 .../providers/ModalProvider/ModalProvider.tsx |  2 +-
 .../web-ui-registration/src/LoginServices.tsx |  6 ++-
 yarn.lock                                     |  1 +
 105 files changed, 296 insertions(+), 213 deletions(-)

diff --git a/apps/meteor/client/components/PageSkeleton.tsx b/apps/meteor/client/components/PageSkeleton.tsx
index 69606f6c3d7ce..ca6b78d3c0257 100644
--- a/apps/meteor/client/components/PageSkeleton.tsx
+++ b/apps/meteor/client/components/PageSkeleton.tsx
@@ -6,7 +6,9 @@ const PageSkeleton = (): ReactElement => (
 	<Page>
 		<PageHeader title={<Skeleton width='x320' maxWidth='full' />}>
 			<ButtonGroup>
-				<Button children={<Skeleton width='x80' />} disabled />
+				<Button disabled>
+					<Skeleton width='x80' />
+				</Button>
 			</ButtonGroup>
 		</PageHeader>
 		<PageContent>
diff --git a/apps/meteor/client/components/UserCard/UserCardRole.tsx b/apps/meteor/client/components/UserCard/UserCardRole.tsx
index 882b8d6f5c558..6687e4eb430b1 100644
--- a/apps/meteor/client/components/UserCard/UserCardRole.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardRole.tsx
@@ -3,7 +3,7 @@ import type { ReactNode, ReactElement } from 'react';
 
 const UserCardRole = ({ children }: { children: ReactNode }): ReactElement => (
 	<Box m={2} fontScale='c2'>
-		<Tag children={children} />
+		<Tag>{children}</Tag>
 	</Box>
 );
 
diff --git a/apps/meteor/client/components/UserInfo/UserInfoABACAttribute.tsx b/apps/meteor/client/components/UserInfo/UserInfoABACAttribute.tsx
index 5605bd91d7cd7..babc25832b05b 100644
--- a/apps/meteor/client/components/UserInfo/UserInfoABACAttribute.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfoABACAttribute.tsx
@@ -5,7 +5,7 @@ type UserInfoABACAttributeProps = {
 };
 
 const UserInfoABACAttribute = ({ attribute }: UserInfoABACAttributeProps) => {
-	return <Tag variant='secondary-warning' children={attribute} />;
+	return <Tag variant='secondary-warning'>{attribute}</Tag>;
 };
 
 export default UserInfoABACAttribute;
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentBlock.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentBlock.tsx
index c357b06c56936..089c350b43536 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentBlock.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentBlock.tsx
@@ -16,8 +16,9 @@ const AttachmentBlock = ({ pre, color = 'annotation', children }: AttachmentBloc
 			borderInlineStartStyle='solid'
 			borderInlineStartWidth='default'
 			borderInlineStartColor={color}
-			children={children}
-		/>
+		>
+			{children}
+		</Box>
 	</Attachment>
 );
 
diff --git a/apps/meteor/client/portals/SidebarPortal/index.tsx b/apps/meteor/client/portals/SidebarPortal/index.tsx
index 9f253b274013f..fa0166ffc6dad 100644
--- a/apps/meteor/client/portals/SidebarPortal/index.tsx
+++ b/apps/meteor/client/portals/SidebarPortal/index.tsx
@@ -8,10 +8,10 @@ const SidebarPortal = ({ children }: { children: ReactNode }) => {
 	return (
 		<FeaturePreview feature='secondarySidebar'>
 			<FeaturePreviewOff>
-				<SidebarPortalV1 children={children} />
+				<SidebarPortalV1>{children}</SidebarPortalV1>
 			</FeaturePreviewOff>
 			<FeaturePreviewOn>
-				<SidebarPortalV2 children={children} />
+				<SidebarPortalV2>{children}</SidebarPortalV2>
 			</FeaturePreviewOn>
 		</FeaturePreview>
 	);
diff --git a/apps/meteor/client/providers/AppsProvider.tsx b/apps/meteor/client/providers/AppsProvider.tsx
index df741ef976412..93e05376222e2 100644
--- a/apps/meteor/client/providers/AppsProvider.tsx
+++ b/apps/meteor/client/providers/AppsProvider.tsx
@@ -8,7 +8,7 @@ type AppsProviderProps = {
 };
 
 const AppsProvider = ({ children }: AppsProviderProps) => {
-	return <AppsContext.Provider children={children} value={AppClientOrchestratorInstance} />;
+	return <AppsContext.Provider value={AppClientOrchestratorInstance}>{children}</AppsContext.Provider>;
 };
 
 export default AppsProvider;
diff --git a/apps/meteor/client/providers/AttachmentProvider.tsx b/apps/meteor/client/providers/AttachmentProvider.tsx
index 9e44b1c6adf57..4ee8cc199cc5b 100644
--- a/apps/meteor/client/providers/AttachmentProvider.tsx
+++ b/apps/meteor/client/providers/AttachmentProvider.tsx
@@ -32,7 +32,7 @@ const AttachmentProvider = ({ children, width = 360, height = 360 }: AttachmentP
 		[collapsedByDefault, reducedData, autoLoadEmbedMedias, saveMobileBandwidth, isMobile, width, height],
 	);
 
-	return <AttachmentContext.Provider children={children} value={contextValue} />;
+	return <AttachmentContext.Provider value={contextValue}>{children}</AttachmentContext.Provider>;
 };
 
 export default AttachmentProvider;
diff --git a/apps/meteor/client/providers/AuthenticationProvider/AuthenticationProvider.tsx b/apps/meteor/client/providers/AuthenticationProvider/AuthenticationProvider.tsx
index 8b5d8d904607f..d32e6ec52a411 100644
--- a/apps/meteor/client/providers/AuthenticationProvider/AuthenticationProvider.tsx
+++ b/apps/meteor/client/providers/AuthenticationProvider/AuthenticationProvider.tsx
@@ -130,7 +130,7 @@ const AuthenticationProvider = ({ children }: AuthenticationProviderProps): Reac
 		[isLoggingIn, loginMethod],
 	);
 
-	return <AuthenticationContext.Provider children={children} value={contextValue} />;
+	return <AuthenticationContext.Provider value={contextValue}>{children}</AuthenticationContext.Provider>;
 };
 
 export default AuthenticationProvider;
diff --git a/apps/meteor/client/providers/AuthorizationProvider.tsx b/apps/meteor/client/providers/AuthorizationProvider.tsx
index 52e0d6e37decf..43bab7852c273 100644
--- a/apps/meteor/client/providers/AuthorizationProvider.tsx
+++ b/apps/meteor/client/providers/AuthorizationProvider.tsx
@@ -35,7 +35,7 @@ const AuthorizationProvider = ({ children }: AuthorizationProviderProps) => {
 		[userId],
 	);
 
-	return <AuthorizationContext.Provider children={children} value={contextValue} />;
+	return <AuthorizationContext.Provider value={contextValue}>{children}</AuthorizationContext.Provider>;
 };
 
 export default AuthorizationProvider;
diff --git a/apps/meteor/client/providers/AvatarUrlProvider.tsx b/apps/meteor/client/providers/AvatarUrlProvider.tsx
index 161e4cc531ee2..85538a36b9ca0 100644
--- a/apps/meteor/client/providers/AvatarUrlProvider.tsx
+++ b/apps/meteor/client/providers/AvatarUrlProvider.tsx
@@ -34,7 +34,7 @@ const AvatarUrlProvider = ({ children }: AvatarUrlProviderProps) => {
 		};
 	}, []);
 
-	return <AvatarUrlContext.Provider children={children} value={contextValue} />;
+	return <AvatarUrlContext.Provider value={contextValue}>{children}</AvatarUrlContext.Provider>;
 };
 
 export default AvatarUrlProvider;
diff --git a/apps/meteor/client/providers/CustomSoundProvider/CustomSoundProvider.tsx b/apps/meteor/client/providers/CustomSoundProvider/CustomSoundProvider.tsx
index 4fced774af5b5..03499b5a214c4 100644
--- a/apps/meteor/client/providers/CustomSoundProvider/CustomSoundProvider.tsx
+++ b/apps/meteor/client/providers/CustomSoundProvider/CustomSoundProvider.tsx
@@ -126,7 +126,7 @@ const CustomSoundProvider = ({ children }: CustomSoundProviderProps) => {
 		});
 	}, [queryClient, streamAll]);
 
-	return <CustomSoundContext.Provider children={children} value={contextValue} />;
+	return <CustomSoundContext.Provider value={contextValue}>{children}</CustomSoundContext.Provider>;
 };
 
 export default CustomSoundProvider;
diff --git a/apps/meteor/client/providers/LayoutProvider.tsx b/apps/meteor/client/providers/LayoutProvider.tsx
index 2ef162b26c3c9..9a1fb57979deb 100644
--- a/apps/meteor/client/providers/LayoutProvider.tsx
+++ b/apps/meteor/client/providers/LayoutProvider.tsx
@@ -54,7 +54,6 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => {
 
 	return (
 		<LayoutContext.Provider
-			children={children}
 			value={useMemo(
 				() => ({
 					isMobile,
@@ -108,7 +107,9 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => {
 					router,
 				],
 			)}
-		/>
+		>
+			{children}
+		</LayoutContext.Provider>
 	);
 };
 
diff --git a/apps/meteor/client/providers/OmnichannelProvider.tsx b/apps/meteor/client/providers/OmnichannelProvider.tsx
index d95c4e5774793..edf4adb630f3d 100644
--- a/apps/meteor/client/providers/OmnichannelProvider.tsx
+++ b/apps/meteor/client/providers/OmnichannelProvider.tsx
@@ -220,7 +220,7 @@ const OmnichannelProvider = ({ children }: OmnichannelProviderProps) => {
 		isOverMacLimit,
 	]);
 
-	return <OmnichannelContext.Provider children={children} value={contextValue} />;
+	return <OmnichannelContext.Provider value={contextValue}>{children}</OmnichannelContext.Provider>;
 };
 
 export default memo<typeof OmnichannelProvider>(OmnichannelProvider);
diff --git a/apps/meteor/client/providers/RouterProvider.tsx b/apps/meteor/client/providers/RouterProvider.tsx
index 099835e672894..77fc0e28c50b8 100644
--- a/apps/meteor/client/providers/RouterProvider.tsx
+++ b/apps/meteor/client/providers/RouterProvider.tsx
@@ -11,6 +11,6 @@ type RouterProviderProps = {
 	children?: ReactNode;
 };
 
-const RouterProvider = ({ children }: RouterProviderProps) => <RouterContext.Provider children={children} value={router} />;
+const RouterProvider = ({ children }: RouterProviderProps) => <RouterContext.Provider value={router}>{children}</RouterContext.Provider>;
 
 export default RouterProvider;
diff --git a/apps/meteor/client/providers/ServerProvider.tsx b/apps/meteor/client/providers/ServerProvider.tsx
index b37d86b5fea48..e8f546d73f064 100644
--- a/apps/meteor/client/providers/ServerProvider.tsx
+++ b/apps/meteor/client/providers/ServerProvider.tsx
@@ -104,7 +104,7 @@ const ServerProvider = ({ children }: ServerProviderProps) => {
 		[connected, retryCount, retryTime, status],
 	);
 
-	return <ServerContext.Provider children={children} value={value} />;
+	return <ServerContext.Provider value={value}>{children}</ServerContext.Provider>;
 };
 
 export default ServerProvider;
diff --git a/apps/meteor/client/providers/SessionProvider.tsx b/apps/meteor/client/providers/SessionProvider.tsx
index faa3157762dfa..00d33729bad9a 100644
--- a/apps/meteor/client/providers/SessionProvider.tsx
+++ b/apps/meteor/client/providers/SessionProvider.tsx
@@ -15,6 +15,8 @@ type SessionProviderProps = {
 	children?: ReactNode;
 };
 
-const SessionProvider = ({ children }: SessionProviderProps) => <SessionContext.Provider children={children} value={contextValue} />;
+const SessionProvider = ({ children }: SessionProviderProps) => (
+	<SessionContext.Provider value={contextValue}>{children}</SessionContext.Provider>
+);
 
 export default SessionProvider;
diff --git a/apps/meteor/client/providers/SettingsProvider.tsx b/apps/meteor/client/providers/SettingsProvider.tsx
index bb9c4e9128257..d90f167e6feaf 100644
--- a/apps/meteor/client/providers/SettingsProvider.tsx
+++ b/apps/meteor/client/providers/SettingsProvider.tsx
@@ -121,7 +121,7 @@ const SettingsProvider = ({ children }: SettingsProviderProps) => {
 		[canManageSettings, querySetting, querySettings, dispatch],
 	);
 
-	return <SettingsContext.Provider children={children} value={contextValue} />;
+	return <SettingsContext.Provider value={contextValue}>{children}</SettingsContext.Provider>;
 };
 
 export default SettingsProvider;
diff --git a/apps/meteor/client/providers/ToastMessagesProvider.tsx b/apps/meteor/client/providers/ToastMessagesProvider.tsx
index e0c831889976b..8df55abd71dbb 100644
--- a/apps/meteor/client/providers/ToastMessagesProvider.tsx
+++ b/apps/meteor/client/providers/ToastMessagesProvider.tsx
@@ -71,7 +71,7 @@ const ToastMessageInnerProvider = ({ children }: ToastMessageInnerProviderProps)
 		[dispatchToastBar],
 	);
 
-	return <ToastMessagesContext.Provider children={children} value={contextValue} />;
+	return <ToastMessagesContext.Provider value={contextValue}>{children}</ToastMessagesContext.Provider>;
 };
 
 type ToastMessagesProviderProps = {
@@ -81,7 +81,7 @@ type ToastMessagesProviderProps = {
 // eslint-disable-next-line react/no-multi-comp
 const ToastMessagesProvider = ({ children }: ToastMessagesProviderProps) => (
 	<ToastBarProvider>
-		<ToastMessageInnerProvider children={children} />
+		<ToastMessageInnerProvider>{children}</ToastMessageInnerProvider>
 	</ToastBarProvider>
 );
 
diff --git a/apps/meteor/client/providers/TranslationProvider.tsx b/apps/meteor/client/providers/TranslationProvider.tsx
index 5a29aa248140e..c8aaabbf8470c 100644
--- a/apps/meteor/client/providers/TranslationProvider.tsx
+++ b/apps/meteor/client/providers/TranslationProvider.tsx
@@ -245,7 +245,7 @@ const TranslationProvider = ({ children }: TranslationProviderProps): ReactEleme
 
 	return (
 		<I18nextProvider i18n={i18nextInstance}>
-			<TranslationProviderInner children={children} availableLanguages={availableLanguages} />
+			<TranslationProviderInner availableLanguages={availableLanguages}>{children}</TranslationProviderInner>
 		</I18nextProvider>
 	);
 };
@@ -286,7 +286,7 @@ const TranslationProviderInner = ({
 		[availableLanguages, i18n, t],
 	);
 
-	return <TranslationContext.Provider children={children} value={value} />;
+	return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>;
 };
 
 export default TranslationProvider;
diff --git a/apps/meteor/client/providers/UserProvider/UserProvider.tsx b/apps/meteor/client/providers/UserProvider/UserProvider.tsx
index 1faeac2f31dab..a2aa71db30f31 100644
--- a/apps/meteor/client/providers/UserProvider/UserProvider.tsx
+++ b/apps/meteor/client/providers/UserProvider/UserProvider.tsx
@@ -187,7 +187,7 @@ const UserProvider = ({ children }: UserProviderProps): ReactElement => {
 		previousUserId.current = userId;
 	}, [queryClient, userId]);
 
-	return <UserContext.Provider children={children} value={contextValue} />;
+	return <UserContext.Provider value={contextValue}>{children}</UserContext.Provider>;
 };
 
 export default UserProvider;
diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx
index a8c29daa16475..31f51006661d0 100644
--- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx
+++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx
@@ -16,7 +16,6 @@ const FederatedRoomListErrorBoundary = ({ children, resetKeys }: FederatedRoomLi
 		<QueryErrorResetBoundary>
 			{({ reset }) => (
 				<ErrorBoundary
-					children={children}
 					resetKeys={resetKeys}
 					fallbackRender={({ resetErrorBoundary }) => (
 						<States>
@@ -35,7 +34,9 @@ const FederatedRoomListErrorBoundary = ({ children, resetKeys }: FederatedRoomLi
 							</StatesActions>
 						</States>
 					)}
-				/>
+				>
+					{children}
+				</ErrorBoundary>
 			)}
 		</QueryErrorResetBoundary>
 	);
diff --git a/apps/meteor/client/sidebar/hooks/useRoomList.spec.tsx b/apps/meteor/client/sidebar/hooks/useRoomList.spec.tsx
index 4472104644e2b..ea8ca667ec079 100644
--- a/apps/meteor/client/sidebar/hooks/useRoomList.spec.tsx
+++ b/apps/meteor/client/sidebar/hooks/useRoomList.spec.tsx
@@ -83,8 +83,9 @@ const getWrapperSettings = ({
 						queryIncomingCalls: () => [() => () => undefined, () => emptyArr],
 					} as any
 				}
-				children={children}
-			/>
+			>
+				{children}
+			</VideoConfContext.Provider>
 		))
 		.withUser(user)
 		.withSubscriptions([...fakeRooms, fakeRoom && fakeRoom].filter(Boolean) as unknown as SubscriptionWithRoom[])
diff --git a/apps/meteor/client/stories/contexts/ModalContextMock.tsx b/apps/meteor/client/stories/contexts/ModalContextMock.tsx
index 2e5f4171ba65c..ee8074ddd64c5 100644
--- a/apps/meteor/client/stories/contexts/ModalContextMock.tsx
+++ b/apps/meteor/client/stories/contexts/ModalContextMock.tsx
@@ -28,7 +28,7 @@ const ModalContextMock = ({ children }: ModalContextMockProps): ReactElement =>
 		[context],
 	);
 
-	return <ModalContext.Provider children={children} value={value} />;
+	return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>;
 };
 
 export default ModalContextMock;
diff --git a/apps/meteor/client/stories/contexts/RouterContextMock.tsx b/apps/meteor/client/stories/contexts/RouterContextMock.tsx
index 73a12a7abe625..793baab27641b 100644
--- a/apps/meteor/client/stories/contexts/RouterContextMock.tsx
+++ b/apps/meteor/client/stories/contexts/RouterContextMock.tsx
@@ -28,7 +28,7 @@ const RouterContextMock = ({ children }: RouterContextMockProps): ReactElement =
 		[parent],
 	);
 
-	return <RouterContext.Provider children={children} value={value} />;
+	return <RouterContext.Provider value={value}>{children}</RouterContext.Provider>;
 };
 
 export default RouterContextMock;
diff --git a/apps/meteor/client/stories/contexts/ServerContextMock.tsx b/apps/meteor/client/stories/contexts/ServerContextMock.tsx
index 43c1f058e92fa..86aba2337f96a 100644
--- a/apps/meteor/client/stories/contexts/ServerContextMock.tsx
+++ b/apps/meteor/client/stories/contexts/ServerContextMock.tsx
@@ -181,7 +181,7 @@ const ServerContextMock = ({
 		};
 	}, [baseURL, callEndpoint, callMethod, overrides, parent]);
 
-	return <ServerContext.Provider children={children} value={value} />;
+	return <ServerContext.Provider value={value}>{children}</ServerContext.Provider>;
 };
 
 export default ServerContextMock;
diff --git a/apps/meteor/client/stories/contexts/TranslationContextMock.tsx b/apps/meteor/client/stories/contexts/TranslationContextMock.tsx
index 4d1764160a235..20d0128316f9e 100644
--- a/apps/meteor/client/stories/contexts/TranslationContextMock.tsx
+++ b/apps/meteor/client/stories/contexts/TranslationContextMock.tsx
@@ -61,7 +61,7 @@ const TranslationContextMock = ({ children }: TranslationContextMockProps): Reac
 		};
 	}, [parent]);
 
-	return <TranslationContext.Provider children={children} value={value} />;
+	return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>;
 };
 
 export default TranslationContextMock;
diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx
index ace971977c1d9..7f8ad4a25a6bd 100644
--- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx
+++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx
@@ -10,22 +10,18 @@ const CustomUserStatusDisabledModal = ({ isAdmin, onConfirm, onClose }: CustomUs
 			title={t('User_status_disabled_learn_more')}
 			cancelText={t('Close')}
 			confirmText={t('Go_to_workspace_settings')}
-			children={t('User_status_disabled_learn_more_description')}
 			onConfirm={onConfirm}
 			onClose={onClose}
 			onCancel={onClose}
 			icon={null}
 			variant='warning'
-		/>
+		>
+			{t('User_status_disabled_learn_more_description')}
+		</GenericModal>
 	) : (
-		<GenericModal
-			title={t('User_status_disabled_learn_more')}
-			confirmText={t('Close')}
-			children={t('User_status_disabled_learn_more_description')}
-			onConfirm={onConfirm}
-			onClose={onClose}
-			icon={null}
-		/>
+		<GenericModal title={t('User_status_disabled_learn_more')} confirmText={t('Close')} onConfirm={onConfirm} onClose={onClose} icon={null}>
+			{t('User_status_disabled_learn_more_description')}
+		</GenericModal>
 	);
 };
 
diff --git a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardErrorBoundary.tsx b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardErrorBoundary.tsx
index dcfe34ff50e2f..02ae71e06d698 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardErrorBoundary.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardErrorBoundary.tsx
@@ -24,7 +24,6 @@ const EngagementDashboardCardErrorBoundary = ({ children }: EngagementDashboardC
 		<QueryErrorResetBoundary>
 			{({ reset }): ReactElement => (
 				<ErrorBoundary
-					children={children}
 					onError={errorHandler}
 					onReset={reset}
 					fallbackRender={({ resetErrorBoundary }): ReactElement => (
@@ -37,7 +36,9 @@ const EngagementDashboardCardErrorBoundary = ({ children }: EngagementDashboardC
 							</StatesActions>
 						</States>
 					)}
-				/>
+				>
+					{children}
+				</ErrorBoundary>
 			)}
 		</QueryErrorResetBoundary>
 	);
diff --git a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.stories.tsx b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.stories.tsx
index 63a13b55ce204..b81858049a6c7 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.stories.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.stories.tsx
@@ -5,7 +5,7 @@ import EngagementDashboardPage from './EngagementDashboardPage';
 
 export default {
 	component: EngagementDashboardPage,
-	decorators: [(fn): ReactElement => <div children={fn()} style={{ height: '100vh' }} />],
+	decorators: [(fn): ReactElement => <div style={{ height: '100vh' }}>{fn()}</div>],
 } satisfies Meta<typeof EngagementDashboardPage>;
 
 export const Default: StoryFn<typeof EngagementDashboardPage> = () => <EngagementDashboardPage tab='users' />;
diff --git a/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsTab.stories.tsx b/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsTab.stories.tsx
index 52d970e5dfa75..2456c122aecd2 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsTab.stories.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsTab.stories.tsx
@@ -5,7 +5,7 @@ import ChannelsTab from './ChannelsOverview';
 
 export default {
 	component: ChannelsTab,
-	decorators: [(fn) => <Margins children={fn()} all='x24' />],
+	decorators: [(fn) => <Margins all='x24'>{fn()}</Margins>],
 } satisfies Meta<typeof ChannelsTab>;
 
 export const Default: StoryFn<typeof ChannelsTab> = () => <ChannelsTab />;
diff --git a/apps/meteor/client/views/admin/engagementDashboard/dataView/LegendSymbol.stories.tsx b/apps/meteor/client/views/admin/engagementDashboard/dataView/LegendSymbol.stories.tsx
index ff89692a3a82b..ad40db0535954 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/dataView/LegendSymbol.stories.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/dataView/LegendSymbol.stories.tsx
@@ -7,7 +7,7 @@ import { monochromaticColors, polychromaticColors } from './colors';
 
 export default {
 	component: LegendSymbol,
-	decorators: [(fn): ReactElement => <Margins children={fn()} all='x16' />],
+	decorators: [(fn): ReactElement => <Margins all='x16'>{fn()}</Margins>],
 } satisfies Meta<typeof LegendSymbol>;
 
 export const withoutColor: StoryFn<typeof LegendSymbol> = () => (
diff --git a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.stories.tsx b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.stories.tsx
index 201555c51fb87..5b57acaef630d 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.stories.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.stories.tsx
@@ -5,7 +5,7 @@ import MessagesTab from './MessagesTab';
 
 export default {
 	component: MessagesTab,
-	decorators: [(fn) => <Margins children={fn()} all='x24' />],
+	decorators: [(fn) => <Margins all='x24'>{fn()}</Margins>],
 } satisfies Meta<typeof MessagesTab>;
 
 export const Default: StoryFn<typeof MessagesTab> = () => <MessagesTab timezone='utc' />;
diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.stories.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.stories.tsx
index 165ee34b56f8a..b89f32efad5ec 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.stories.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.stories.tsx
@@ -6,7 +6,7 @@ import UsersTab from './UsersTab';
 
 export default {
 	component: UsersTab,
-	decorators: [(fn): ReactElement => <Margins children={fn()} all='x24' />],
+	decorators: [(fn): ReactElement => <Margins all='x24'>{fn()}</Margins>],
 } satisfies Meta<typeof UsersTab>;
 
 export const Default: StoryFn<typeof UsersTab> = () => <UsersTab timezone='utc' />;
diff --git a/apps/meteor/client/views/admin/invites/InvitesPage.tsx b/apps/meteor/client/views/admin/invites/InvitesPage.tsx
index e123d50b2379d..efc94915cdf7a 100644
--- a/apps/meteor/client/views/admin/invites/InvitesPage.tsx
+++ b/apps/meteor/client/views/admin/invites/InvitesPage.tsx
@@ -55,14 +55,15 @@ const InvitesPage = (): ReactElement => {
 		setModal(
 			<GenericModal
 				title={t('Are_you_sure')}
-				children={t('Are_you_sure_you_want_to_delete_this_record')}
 				variant='danger'
 				confirmText={t('Yes')}
 				cancelText={t('No')}
 				onClose={(): void => setModal()}
 				onCancel={(): void => setModal()}
 				onConfirm={confirmRemove}
-			/>,
+			>
+				{t('Are_you_sure_you_want_to_delete_this_record')}
+			</GenericModal>,
 		);
 	};
 
diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx
index 2ae5eea8cd127..10947f5758f28 100644
--- a/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx
@@ -163,14 +163,9 @@ const SettingsGroupPage = ({
 							{t('Cancel')}
 						</Button>
 					)}
-					<Button
-						children={t('Save_changes')}
-						className='save'
-						disabled={changedEditableSettings.length === 0}
-						primary
-						type='submit'
-						onClick={handleSaveClick}
-					/>
+					<Button className='save' disabled={changedEditableSettings.length === 0} primary type='submit' onClick={handleSaveClick}>
+						{t('Save_changes')}
+					</Button>
 				</ButtonGroup>
 			</PageFooter>
 		</Page>
diff --git a/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx
index 1f2eb77b4f64e..9a59aaffb2070 100644
--- a/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx
+++ b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx
@@ -89,14 +89,9 @@ function SettingsSection({ groupId, hasReset = true, sectionName, currentTab, so
 				{children}
 			</FieldGroup>
 			{hasReset && canReset && (
-				<Button
-					children={t('Reset_section_settings')}
-					secondary
-					danger
-					marginBlockStart={16}
-					data-section={sectionName}
-					onClick={handleResetSectionClick}
-				/>
+				<Button secondary danger marginBlockStart={16} data-section={sectionName} onClick={handleResetSectionClick}>
+					{t('Reset_section_settings')}
+				</Button>
 			)}
 		</AccordionItem>
 	);
diff --git a/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx
index 85f4dca30267c..2ae03dbb563ff 100644
--- a/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx
@@ -138,9 +138,15 @@ function LDAPGroupPage({ _id, i18nLabel, onClickBack, ...group }: LDAPGroupPageP
 			{...group}
 			headerButtons={
 				<>
-					<Button children={t('Test_Connection')} disabled={!ldapEnabled || changed} onClick={handleTestConnectionButtonClick} />
-					<Button children={t('Test_LDAP_Search')} disabled={!ldapEnabled || changed} onClick={handleSearchTestButtonClick} />
-					<Button children={t('LDAP_Sync_Now')} disabled={!ldapEnabled || changed} onClick={handleSyncNowButtonClick} />
+					<Button disabled={!ldapEnabled || changed} onClick={handleTestConnectionButtonClick}>
+						{t('Test_Connection')}
+					</Button>
+					<Button disabled={!ldapEnabled || changed} onClick={handleSearchTestButtonClick}>
+						{t('Test_LDAP_Search')}
+					</Button>
+					<Button disabled={!ldapEnabled || changed} onClick={handleSyncNowButtonClick}>
+						{t('LDAP_Sync_Now')}
+					</Button>
 					<Button role='link' onClick={() => handleLinkClick(links.go.ldapDocs)}>
 						{t('LDAP_Documentation')}
 					</Button>
diff --git a/apps/meteor/client/views/home/cards/AddUsersCard.tsx b/apps/meteor/client/views/home/cards/AddUsersCard.tsx
index bc5265bfac083..dea1090f786b7 100644
--- a/apps/meteor/client/views/home/cards/AddUsersCard.tsx
+++ b/apps/meteor/client/views/home/cards/AddUsersCard.tsx
@@ -16,7 +16,11 @@ const AddUsersCard = (props: Omit<ComponentProps<typeof Card>, 'type'>): ReactEl
 		<GenericCard
 			title={t('Add_users')}
 			body={t('Invite_and_add_members_to_this_workspace_to_start_communicating')}
-			buttons={[<GenericCardButton key={1} onClick={handleOpenUsersRoute} children={t('Add_users')} primary />]}
+			buttons={[
+				<GenericCardButton key={1} onClick={handleOpenUsersRoute} primary>
+					{t('Add_users')}
+				</GenericCardButton>,
+			]}
 			width='x340'
 			{...props}
 		/>
diff --git a/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx b/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx
index ed363c51fae95..8083f005aa3c7 100644
--- a/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx
+++ b/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx
@@ -15,7 +15,11 @@ const CreateChannelsCard = (props: Omit<ComponentProps<typeof Card>, 'type'>): R
 		<GenericCard
 			title={t('Create_channels')}
 			body={t('Create_a_public_channel_that_new_workspace_members_can_join')}
-			buttons={[<GenericCardButton key={1} onClick={openCreateChannelModal} children={t('Create_channel')} />]}
+			buttons={[
+				<GenericCardButton key={1} onClick={openCreateChannelModal}>
+					{t('Create_channel')}
+				</GenericCardButton>,
+			]}
 			width='x340'
 			{...props}
 		/>
diff --git a/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx b/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx
index 674385f6ca27d..d4165f0f746b9 100644
--- a/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx
+++ b/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx
@@ -19,9 +19,15 @@ const DesktopAppsCard = (props: Omit<ComponentProps<typeof Card>, 'type'>): Reac
 			title={t('Desktop_apps')}
 			body={t('Install_rocket_chat_on_your_preferred_desktop_platform')}
 			buttons={[
-				<GenericCardButton key={1} onClick={() => handleOpenLink(WINDOWS_APP_URL)} children={t('Platform_Windows')} role='link' />,
-				<GenericCardButton key={2} onClick={() => handleOpenLink(LINUX_APP_URL)} children={t('Platform_Linux')} role='link' />,
-				<GenericCardButton key={3} onClick={() => handleOpenLink(MAC_APP_URL)} children={t('Platform_Mac')} role='link' />,
+				<GenericCardButton key={1} onClick={() => handleOpenLink(WINDOWS_APP_URL)} role='link'>
+					{t('Platform_Windows')}
+				</GenericCardButton>,
+				<GenericCardButton key={2} onClick={() => handleOpenLink(LINUX_APP_URL)} role='link'>
+					{t('Platform_Linux')}
+				</GenericCardButton>,
+				<GenericCardButton key={3} onClick={() => handleOpenLink(MAC_APP_URL)} role='link'>
+					{t('Platform_Mac')}
+				</GenericCardButton>,
 			]}
 			width='x340'
 			{...props}
diff --git a/apps/meteor/client/views/home/cards/DocumentationCard.tsx b/apps/meteor/client/views/home/cards/DocumentationCard.tsx
index 104b2f1938660..7854b4dfc718b 100644
--- a/apps/meteor/client/views/home/cards/DocumentationCard.tsx
+++ b/apps/meteor/client/views/home/cards/DocumentationCard.tsx
@@ -16,7 +16,11 @@ const DocumentationCard = (props: Omit<ComponentProps<typeof Card>, 'type'>): Re
 		<GenericCard
 			title={t('Documentation')}
 			body={t('Learn_how_to_unlock_the_myriad_possibilities_of_rocket_chat')}
-			buttons={[<GenericCardButton key={1} onClick={() => handleOpenLink(DOCS_URL)} children={t('See_documentation')} role='link' />]}
+			buttons={[
+				<GenericCardButton key={1} onClick={() => handleOpenLink(DOCS_URL)} role='link'>
+					{t('See_documentation')}
+				</GenericCardButton>,
+			]}
 			width='x340'
 			{...props}
 		/>
diff --git a/apps/meteor/client/views/home/cards/JoinRoomsCard.tsx b/apps/meteor/client/views/home/cards/JoinRoomsCard.tsx
index 8ff00d2d5dc09..f0ff5b45de9d5 100644
--- a/apps/meteor/client/views/home/cards/JoinRoomsCard.tsx
+++ b/apps/meteor/client/views/home/cards/JoinRoomsCard.tsx
@@ -16,7 +16,11 @@ const JoinRoomsCard = (props: Omit<ComponentProps<typeof Card>, 'type'>): ReactE
 		<GenericCard
 			title={t('Join_rooms')}
 			body={t('Discover_public_channels_and_teams_in_the_workspace_directory')}
-			buttons={[<GenericCardButton key={1} onClick={handleDirectory} children={t('Open_directory')} />]}
+			buttons={[
+				<GenericCardButton key={1} onClick={handleDirectory}>
+					{t('Open_directory')}
+				</GenericCardButton>,
+			]}
 			width='x340'
 			{...props}
 		/>
diff --git a/apps/meteor/client/views/home/cards/MobileAppsCard.tsx b/apps/meteor/client/views/home/cards/MobileAppsCard.tsx
index e91cf3fabcfc3..bc88d2bc8d43e 100644
--- a/apps/meteor/client/views/home/cards/MobileAppsCard.tsx
+++ b/apps/meteor/client/views/home/cards/MobileAppsCard.tsx
@@ -18,8 +18,12 @@ const MobileAppsCard = (props: Omit<ComponentProps<typeof Card>, 'type'>): React
 			title={t('Mobile_apps')}
 			body={t('Take_rocket_chat_with_you_with_mobile_applications')}
 			buttons={[
-				<GenericCardButton key={1} onClick={() => handleOpenLink(GOOGLE_PLAY_URL)} children={t('Google_Play')} role='link' />,
-				<GenericCardButton key={2} onClick={() => handleOpenLink(APP_STORE_URL)} children={t('App_Store')} role='link' />,
+				<GenericCardButton key={1} onClick={() => handleOpenLink(GOOGLE_PLAY_URL)} role='link'>
+					{t('Google_Play')}
+				</GenericCardButton>,
+				<GenericCardButton key={2} onClick={() => handleOpenLink(APP_STORE_URL)} role='link'>
+					{t('App_Store')}
+				</GenericCardButton>,
 			]}
 			width='x340'
 			{...props}
diff --git a/apps/meteor/client/views/omnichannel/directory/providers/ChatsProvider.tsx b/apps/meteor/client/views/omnichannel/directory/providers/ChatsProvider.tsx
index 545c0bcfc08e1..13362ed52977e 100644
--- a/apps/meteor/client/views/omnichannel/directory/providers/ChatsProvider.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/providers/ChatsProvider.tsx
@@ -45,7 +45,7 @@ const ChatsProvider = ({ children }: ChatsProviderProps) => {
 		[displayFilters, filtersQuery, setFiltersQuery],
 	);
 
-	return <ChatsContext.Provider children={children} value={contextValue} />;
+	return <ChatsContext.Provider value={contextValue}>{children}</ChatsContext.Provider>;
 };
 
 export default ChatsProvider;
diff --git a/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx b/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
index 0f99674040599..a0b59d9add935 100644
--- a/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
+++ b/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
@@ -110,7 +110,7 @@ const ForwardChatModal = ({ onForward, onCancel, room, ...props }: ForwardChatMo
 							/>
 						</FieldRow>
 					</Field>
-					<Divider p={0} children={t('or')} />
+					<Divider p={0}>{t('or')}</Divider>
 					<Field>
 						<FieldLabel htmlFor={userFieldId}>{t('Forward_to_user')}</FieldLabel>
 						<FieldRow>
diff --git a/apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx b/apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx
index b8a3e32fa8479..4b32e954c93a6 100644
--- a/apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx
+++ b/apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx
@@ -11,7 +11,6 @@ const MessageListErrorBoundary = ({ children }: { children: ReactNode }): ReactE
 
 	return (
 		<ErrorBoundary
-			children={children}
 			resetKeys={[room._id]}
 			fallback={
 				<States>
@@ -29,7 +28,9 @@ const MessageListErrorBoundary = ({ children }: { children: ReactNode }): ReactE
 					</StatesActions>
 				</States>
 			}
-		/>
+		>
+			{children}
+		</ErrorBoundary>
 	);
 };
 
diff --git a/apps/meteor/client/views/room/hooks/useToggleFavoriteMutation.spec.tsx b/apps/meteor/client/views/room/hooks/useToggleFavoriteMutation.spec.tsx
index a005a4ef5c694..5843aefeb5f9f 100644
--- a/apps/meteor/client/views/room/hooks/useToggleFavoriteMutation.spec.tsx
+++ b/apps/meteor/client/views/room/hooks/useToggleFavoriteMutation.spec.tsx
@@ -28,7 +28,7 @@ it('should invalidate any subscription queries', async () => {
 	const { result } = renderHook(() => useToggleFavoriteMutation(), {
 		wrapper: mockAppRoot()
 			.withEndpoint('POST', '/v1/rooms.favorite', async () => null)
-			.wrap((children) => <QueryClientProvider client={queryClient} children={children} />)
+			.wrap((children) => <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>)
 			.build(),
 	});
 
diff --git a/apps/meteor/client/views/room/modals/DeleteMessageConfirmModal/DeleteMessageConfirmModal.tsx b/apps/meteor/client/views/room/modals/DeleteMessageConfirmModal/DeleteMessageConfirmModal.tsx
index 40c8486a03691..0a3103f290cf9 100644
--- a/apps/meteor/client/views/room/modals/DeleteMessageConfirmModal/DeleteMessageConfirmModal.tsx
+++ b/apps/meteor/client/views/room/modals/DeleteMessageConfirmModal/DeleteMessageConfirmModal.tsx
@@ -56,11 +56,12 @@ const DeleteMessageConfirmModal = ({
 			variant='danger'
 			title={t('Are_you_sure')}
 			confirmText={t('Yes_delete_it')}
-			children={room ? t('The_message_is_a_discussion_you_will_not_be_able_to_recover') : t('You_will_not_be_able_to_recover')}
 			onConfirm={deleteMessageMutation.mutate}
 			onCancel={onCancel}
 			confirmDisabled={deleteMessageMutation.isPending}
-		/>
+		>
+			{room ? t('The_message_is_a_discussion_you_will_not_be_able_to_recover') : t('You_will_not_be_able_to_recover')}
+		</GenericModal>
 	);
 };
 
diff --git a/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx b/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx
index c1133eef6cc0a..0074e07a0a61b 100644
--- a/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx
+++ b/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx
@@ -402,7 +402,7 @@ const ComposerPopupProvider = ({ children, room }: ComposerPopupProviderProps) =
 		userSpotlight,
 	]);
 
-	return <ComposerPopupContext.Provider value={value} children={children} />;
+	return <ComposerPopupContext.Provider value={value}>{children}</ComposerPopupContext.Provider>;
 };
 
 export default ComposerPopupProvider;
diff --git a/apps/meteor/client/views/root/MainLayout/AuthenticationCheck.tsx b/apps/meteor/client/views/root/MainLayout/AuthenticationCheck.tsx
index 822acfc22562b..928f3e38d762c 100644
--- a/apps/meteor/client/views/root/MainLayout/AuthenticationCheck.tsx
+++ b/apps/meteor/client/views/root/MainLayout/AuthenticationCheck.tsx
@@ -29,7 +29,7 @@ const AuthenticationCheck = ({ children, guest }: { children: ReactNode; guest?:
 	}
 
 	if (!forceLogin && guest) {
-		return <RegistrationRoute defaultRoute='guest' children={children} />;
+		return <RegistrationRoute defaultRoute='guest'>{children}</RegistrationRoute>;
 	}
 
 	if (!forceLogin && allowAnonymousRead) {
diff --git a/apps/meteor/client/views/root/MainLayout/LoginPage.tsx b/apps/meteor/client/views/root/MainLayout/LoginPage.tsx
index d270bcba6c465..7b4574419b37a 100644
--- a/apps/meteor/client/views/root/MainLayout/LoginPage.tsx
+++ b/apps/meteor/client/views/root/MainLayout/LoginPage.tsx
@@ -28,7 +28,7 @@ const LoginPage = ({ defaultRoute, children }: { defaultRoute?: LoginRoutes; chi
 	return (
 		<>
 			{showForcedLogoutBanner && <LoggedOutBanner />}
-			<RegistrationRoute defaultRoute={defaultRoute} children={children} />
+			<RegistrationRoute defaultRoute={defaultRoute}>{children}</RegistrationRoute>
 		</>
 	);
 };
diff --git a/apps/meteor/tests/mocks/client/FakeChatProvider.tsx b/apps/meteor/tests/mocks/client/FakeChatProvider.tsx
index 542b5e3313394..a71e49df666e8 100644
--- a/apps/meteor/tests/mocks/client/FakeChatProvider.tsx
+++ b/apps/meteor/tests/mocks/client/FakeChatProvider.tsx
@@ -10,7 +10,6 @@ type FakeChatProviderProps = {
 const FakeChatProvider = ({ children }: FakeChatProviderProps): ReactElement => {
 	return (
 		<ChatContext.Provider
-			children={children}
 			value={
 				{
 					data: {
@@ -20,7 +19,9 @@ const FakeChatProvider = ({ children }: FakeChatProviderProps): ReactElement =>
 					},
 				} as any
 			}
-		/>
+		>
+			{children}
+		</ChatContext.Provider>
 	);
 };
 
diff --git a/apps/meteor/tests/mocks/client/ModalContextMock.tsx b/apps/meteor/tests/mocks/client/ModalContextMock.tsx
index 1bbdb2270bcb9..07d97156b1ac5 100644
--- a/apps/meteor/tests/mocks/client/ModalContextMock.tsx
+++ b/apps/meteor/tests/mocks/client/ModalContextMock.tsx
@@ -16,7 +16,7 @@ const ModalContextMock = ({ children }: ModalContextMockProps): ReactElement =>
 		[],
 	);
 
-	return <ModalContext.Provider children={children} value={value as unknown as ContextType<typeof ModalContext>} />;
+	return <ModalContext.Provider value={value as unknown as ContextType<typeof ModalContext>}>{children}</ModalContext.Provider>;
 };
 
 export default ModalContextMock;
diff --git a/apps/meteor/tests/mocks/client/ServerProviderMock.tsx b/apps/meteor/tests/mocks/client/ServerProviderMock.tsx
index 0013872b1038d..f59649eaae083 100644
--- a/apps/meteor/tests/mocks/client/ServerProviderMock.tsx
+++ b/apps/meteor/tests/mocks/client/ServerProviderMock.tsx
@@ -83,7 +83,7 @@ type ServerProviderMockProps = {
 
 const ServerProviderMock = ({ children, callEndpoint }: ServerProviderMockProps) => {
 	const value = useMemo(() => ({ ...contextValue, callEndpoint: callEndpoint ?? contextValue.callEndpoint }), [callEndpoint]);
-	return <ServerContext.Provider children={children} value={value} />;
+	return <ServerContext.Provider value={value}>{children}</ServerContext.Provider>;
 };
 
 export default ServerProviderMock;
diff --git a/apps/uikit-playground/.eslintrc.json b/apps/uikit-playground/.eslintrc.json
index 972542b9e3ceb..bf9b095684aee 100644
--- a/apps/uikit-playground/.eslintrc.json
+++ b/apps/uikit-playground/.eslintrc.json
@@ -3,6 +3,8 @@
 	"extends": [
 		"eslint:recommended",
 		"plugin:@typescript-eslint/recommended",
+		"plugin:react/recommended",
+		"plugin:react/jsx-runtime",
 		"plugin:react-hooks/recommended"
 	],
 	"parser": "@typescript-eslint/parser",
diff --git a/apps/uikit-playground/package.json b/apps/uikit-playground/package.json
index c6065db01545d..845d53be559b7 100644
--- a/apps/uikit-playground/package.json
+++ b/apps/uikit-playground/package.json
@@ -52,6 +52,7 @@
     "@typescript-eslint/parser": "~5.60.1",
     "@vitejs/plugin-react": "~4.5.2",
     "eslint": "~8.45.0",
+    "eslint-plugin-react": "~7.37.5",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.24",
     "typescript": "~5.9.3",
diff --git a/apps/uikit-playground/src/Components/Draggable/DraggableList.tsx b/apps/uikit-playground/src/Components/Draggable/DraggableList.tsx
index a94ebbefbe95c..db7b3968a3d91 100644
--- a/apps/uikit-playground/src/Components/Draggable/DraggableList.tsx
+++ b/apps/uikit-playground/src/Components/Draggable/DraggableList.tsx
@@ -17,30 +17,28 @@ export type DraggableListProps = {
   onDragEnd: OnDragEndResponder;
 };
 
-const DraggableList = memo(
-  ({ blocks, surface, onDragEnd }: DraggableListProps) => (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable droppableId="droppable-list">
-        {(provided) => (
-          <div
-            style={{ padding: '10px' }}
-            ref={provided.innerRef}
-            {...provided.droppableProps}
-          >
-            {blocks.map((block, index) => (
-              <DraggableListItem
-                surface={surface || SurfaceOptions.Message}
-                block={block}
-                index={index}
-                key={block.id}
-              />
-            ))}
-            {provided.placeholder}
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
-  )
+const DraggableList = ({ blocks, surface, onDragEnd }: DraggableListProps) => (
+  <DragDropContext onDragEnd={onDragEnd}>
+    <Droppable droppableId="droppable-list">
+      {(provided) => (
+        <div
+          style={{ padding: '10px' }}
+          ref={provided.innerRef}
+          {...provided.droppableProps}
+        >
+          {blocks.map((block, index) => (
+            <DraggableListItem
+              surface={surface || SurfaceOptions.Message}
+              block={block}
+              index={index}
+              key={block.id}
+            />
+          ))}
+          {provided.placeholder}
+        </div>
+      )}
+    </Droppable>
+  </DragDropContext>
 );
 
-export default DraggableList;
+export default memo(DraggableList);
diff --git a/apps/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx b/apps/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx
index 661e0a67d0d37..2decc3d2eff60 100644
--- a/apps/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx
+++ b/apps/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx
@@ -12,13 +12,14 @@ const Wrapper = ({ children }: { children: ReactNode }): ReactElement => (
     paddingBlock={4}
     paddingInline={2}
     verticalAlign="middle"
-    children={children}
     height="x24"
     className={css`
       cursor: pointer;
     `}
     width="x24"
-  />
+  >
+    {children}
+  </Box>
 );
 
 export default Wrapper;
diff --git a/apps/uikit-playground/src/Components/Templates/Container/Container.tsx b/apps/uikit-playground/src/Components/Templates/Container/Container.tsx
index f52f3a3005b6f..bc2194e1a8c58 100644
--- a/apps/uikit-playground/src/Components/Templates/Container/Container.tsx
+++ b/apps/uikit-playground/src/Components/Templates/Container/Container.tsx
@@ -6,7 +6,7 @@ import Section from './Section';
 const Container = ({ templates }: { templates: templateType[] }) => (
   <Box maxWidth="800px" margin="80px" width={'90%'} height="max-content">
     {templates &&
-      templates.map((template, i) => <Section template={template} index={i} />)}
+      templates.map((template, i) => <Section key={i} template={template} index={i} />)}
   </Box>
 );
 
diff --git a/apps/uikit-playground/src/Components/Templates/Container/Section.tsx b/apps/uikit-playground/src/Components/Templates/Container/Section.tsx
index 954020bcf2dfa..a7408bbcd740a 100644
--- a/apps/uikit-playground/src/Components/Templates/Container/Section.tsx
+++ b/apps/uikit-playground/src/Components/Templates/Container/Section.tsx
@@ -19,8 +19,8 @@ const Section = ({
     <Box mbe="15px">
       <Label>{template.description}</Label>
     </Box>
-    {template.payloads.map((payload) => (
-      <Payload blocks={payload.blocks} surface={payload.surface} />
+    {template.payloads.map((payload, i) => (
+      <Payload key={i} blocks={payload.blocks} surface={payload.surface} />
     ))}
   </Box>
 );
diff --git a/apps/uikit-playground/src/Components/ToggleTabs/index.tsx b/apps/uikit-playground/src/Components/ToggleTabs/index.tsx
index 1a949b5c1a02b..bd10524a02a04 100644
--- a/apps/uikit-playground/src/Components/ToggleTabs/index.tsx
+++ b/apps/uikit-playground/src/Components/ToggleTabs/index.tsx
@@ -25,8 +25,9 @@ const ToggleTabs = ({
           selected={selectedTab === index}
           onClick={() => onChange(index)}
           className={disableBorder}
-          children={item}
-        />
+        >
+          {item}
+        </Tabs.Item>
       ))}
     </Tabs>
   );
diff --git a/apps/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx b/apps/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
index cbbd1fa94d694..a1cbc36b43a46 100644
--- a/apps/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
+++ b/apps/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
@@ -10,10 +10,11 @@ const Wrapper = ({ children }: { children: ReactNode }): ReactElement => (
     alignItems="center"
     justifyContent="space-between"
     verticalAlign="middle"
-    children={children}
     height="max-content"
     width="100%"
-  />
+  >
+    {children}
+  </Box>
 );
 
 export default Wrapper;
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/OrderedListBlock.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/OrderedListBlock.tsx
index fbfecc379651f..9bdcc0553f223 100644
--- a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/OrderedListBlock.tsx
+++ b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/OrderedListBlock.tsx
@@ -24,7 +24,7 @@ const OrderedListBlock = ({ items }: OrderedListBlockProps) => (
 	<View style={styles.wrapper} wrap>
 		{items.map(({ value, number }, index) => (
 			<Text style={styles.list} key={index}>
-				<Text style={styles.number}>{number}.</Text> <InlineElements children={value} />
+				<Text style={styles.number}>{number}.</Text> <InlineElements>{value}</InlineElements>
 			</Text>
 		))}
 	</View>
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/ParagraphBlock.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/ParagraphBlock.tsx
index 9d3f8db9071d6..d0ffe33a7a8bc 100644
--- a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/ParagraphBlock.tsx
+++ b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/ParagraphBlock.tsx
@@ -6,6 +6,6 @@ type ParagraphBlockProps = {
 	items: MessageParser.Inlines[];
 };
 
-const ParagraphBlock = ({ items }: ParagraphBlockProps) => <InlineElements children={items} />;
+const ParagraphBlock = ({ items }: ParagraphBlockProps) => <InlineElements>{items}</InlineElements>;
 
 export default ParagraphBlock;
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/UnorderedListBlock.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/UnorderedListBlock.tsx
index ec074fc77d9fb..964c9023520f0 100644
--- a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/UnorderedListBlock.tsx
+++ b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/blocks/UnorderedListBlock.tsx
@@ -24,7 +24,7 @@ const UnorderedListBlock = ({ items }: UnorderedListBlockProps) => (
 		{items.map(({ value }, index) => (
 			<View style={styles.list} key={index}>
 				<Text style={styles.bullet}>•</Text>
-				<InlineElements children={value} />
+				<InlineElements>{value}</InlineElements>
 			</View>
 		))}
 	</View>
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/BoldSpan.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/BoldSpan.tsx
index 043d05e9ae0f7..a1c1ef3363e14 100644
--- a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/BoldSpan.tsx
+++ b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/BoldSpan.tsx
@@ -48,10 +48,10 @@ const renderBlockComponent = (child: MessageBlock, index: number) => {
 			return <Text key={index}>{child.value}</Text>;
 
 		case 'STRIKE':
-			return <StrikeSpan key={index} children={child.value} />;
+			return <StrikeSpan key={index}>{child.value}</StrikeSpan>;
 
 		case 'ITALIC':
-			return <ItalicSpan key={index} children={child.value} />;
+			return <ItalicSpan key={index}>{child.value}</ItalicSpan>;
 
 		case 'EMOJI':
 			return <EmojiSpan key={index} {...child} />;
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/InlineElements.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/InlineElements.tsx
index 64b99cfd30e9f..b55f96ea2fd29 100644
--- a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/InlineElements.tsx
+++ b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/InlineElements.tsx
@@ -17,13 +17,13 @@ const InlineElements = ({ children }: InlineElementsProps) => (
 		{children.map((child, index) => {
 			switch (child.type) {
 				case 'BOLD':
-					return <BoldSpan key={index} children={child.value} />;
+					return <BoldSpan key={index}>{child.value}</BoldSpan>;
 
 				case 'STRIKE':
-					return <StrikeSpan key={index} children={child.value} />;
+					return <StrikeSpan key={index}>{child.value}</StrikeSpan>;
 
 				case 'ITALIC':
-					return <ItalicSpan key={index} children={child.value} />;
+					return <ItalicSpan key={index}>{child.value}</ItalicSpan>;
 
 				case 'LINK':
 					return <LinkSpan key={index} label={Array.isArray(child.value.label) ? child.value.label : [child.value.label]} />;
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/ItalicSpan.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/ItalicSpan.tsx
index 1b7cc2abe9da7..b568d23609df0 100644
--- a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/ItalicSpan.tsx
+++ b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/ItalicSpan.tsx
@@ -48,10 +48,10 @@ const renderBlockComponent = (child: MessageBlock, index: number) => {
 			return <Text key={index}>{child.value}</Text>;
 
 		case 'STRIKE':
-			return <StrikeSpan key={index} children={child.value} />;
+			return <StrikeSpan key={index}>{child.value}</StrikeSpan>;
 
 		case 'BOLD':
-			return <BoldSpan key={index} children={child.value} />;
+			return <BoldSpan key={index}>{child.value}</BoldSpan>;
 
 		case 'EMOJI':
 			return <EmojiSpan key={index} {...child} />;
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/LinkSpan.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/LinkSpan.tsx
index 3d9f15cb07e63..e0a274b49e7e1 100644
--- a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/LinkSpan.tsx
+++ b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/LinkSpan.tsx
@@ -21,14 +21,11 @@ const LinkSpan = ({ label }: LinkSpanProps): ReactElement => {
 					return <Text key={index}>{child.value.trim()}</Text>;
 
 				case 'STRIKE':
-					return <StrikeSpan key={index} children={child.value} />;
-
+					return <StrikeSpan key={index}>{child.value}</StrikeSpan>;
 				case 'ITALIC':
-					return <ItalicSpan key={index} children={child.value} />;
-
+					return <ItalicSpan key={index}>{child.value}</ItalicSpan>;
 				case 'BOLD':
-					return <BoldSpan key={index} children={child.value} />;
-
+					return <BoldSpan key={index}>{child.value}</BoldSpan>;
 				default:
 					return null;
 			}
diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/StrikeSpan.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/StrikeSpan.tsx
index 94ce0f113938d..a4ce9473971f7 100644
--- a/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/StrikeSpan.tsx
+++ b/ee/packages/pdf-worker/src/templates/ChatTranscript/markup/elements/StrikeSpan.tsx
@@ -49,10 +49,10 @@ const renderBlockComponent = (child: MessageBlock, index: number) => {
 			return <Text key={index}>{child.value}</Text>;
 
 		case 'ITALIC':
-			return <ItalicSpan key={index} children={child.value} />;
+			return <ItalicSpan key={index}>{child.value}</ItalicSpan>;
 
 		case 'BOLD':
-			return <BoldSpan key={index} children={child.value} />;
+			return <BoldSpan key={index}>{child.value}</BoldSpan>;
 
 		case 'EMOJI':
 			return <EmojiSpan key={index} {...child} />;
diff --git a/packages/eslint-config/react.js b/packages/eslint-config/react.js
index b11bcea6a1edb..a5b7d88652309 100644
--- a/packages/eslint-config/react.js
+++ b/packages/eslint-config/react.js
@@ -12,6 +12,7 @@ const config = {
 		'react/jsx-no-undef': 'error',
 		'react/jsx-uses-react': 'error',
 		'react/jsx-uses-vars': 'error',
+		'react/no-children-prop': 'error',
 		'react/no-multi-comp': 'error',
 		'jsx-a11y/no-autofocus': [2, { ignoreNonDOM: true }],
 	},
diff --git a/packages/fuselage-ui-kit/.storybook/preview.tsx b/packages/fuselage-ui-kit/.storybook/preview.tsx
index d3080e682f608..77bd05598cf73 100644
--- a/packages/fuselage-ui-kit/.storybook/preview.tsx
+++ b/packages/fuselage-ui-kit/.storybook/preview.tsx
@@ -62,7 +62,7 @@ export const decorators: Decorator[] = [
 			</>
 		);
 	},
-	(fn) => <QueryClientProvider client={queryClient} children={fn()} />,
+	(fn) => <QueryClientProvider client={queryClient}>{fn()}</QueryClientProvider>,
 ];
 
 export const tags = ['autodocs'];
diff --git a/packages/gazzodown/src/Markup.tsx b/packages/gazzodown/src/Markup.tsx
index 96da5408e50c4..0e0f62ff16f1e 100644
--- a/packages/gazzodown/src/Markup.tsx
+++ b/packages/gazzodown/src/Markup.tsx
@@ -26,10 +26,14 @@ const Markup = ({ tokens }: MarkupProps): ReactElement => (
 					return <BigEmojiBlock key={index} emoji={block.value} />;
 
 				case 'PARAGRAPH':
-					return <ParagraphBlock key={index} children={block.value} />;
+					return <ParagraphBlock key={index}>{block.value}</ParagraphBlock>;
 
 				case 'HEADING':
-					return <HeadingBlock key={index} level={block.level} children={block.value} />;
+					return (
+						<HeadingBlock key={index} level={block.level}>
+							{block.value}
+						</HeadingBlock>
+					);
 
 				case 'UNORDERED_LIST':
 					return <UnorderedListBlock key={index} items={block.value} />;
@@ -41,7 +45,7 @@ const Markup = ({ tokens }: MarkupProps): ReactElement => (
 					return <TaskList key={index} tasks={block.value} />;
 
 				case 'QUOTE':
-					return <QuoteBlock key={index} children={block.value} />;
+					return <QuoteBlock key={index}>{block.value}</QuoteBlock>;
 
 				case 'CODE':
 					return <CodeBlock key={index} language={block.language} lines={block.value} />;
diff --git a/packages/gazzodown/src/PreviewMarkup.tsx b/packages/gazzodown/src/PreviewMarkup.tsx
index d14af4af9255a..bb5a4d08ef943 100644
--- a/packages/gazzodown/src/PreviewMarkup.tsx
+++ b/packages/gazzodown/src/PreviewMarkup.tsx
@@ -28,7 +28,7 @@ const PreviewMarkup = ({ tokens }: PreviewMarkupProps): ReactElement | null => {
 
 	switch (firstBlock.type) {
 		case 'PARAGRAPH':
-			return <PreviewInlineElements children={firstBlock.value} />;
+			return <PreviewInlineElements>{firstBlock.value}</PreviewInlineElements>;
 
 		case 'HEADING':
 			return <>{firstBlock.value.map((plain) => plain.value).join('')}</>;
@@ -39,7 +39,7 @@ const PreviewMarkup = ({ tokens }: PreviewMarkupProps): ReactElement | null => {
 
 			return (
 				<>
-					{firstItem.number ? `${firstItem.number}.` : '-'} <PreviewInlineElements children={firstItem.value} />
+					{firstItem.number ? `${firstItem.number}.` : '-'} <PreviewInlineElements>{firstItem.value}</PreviewInlineElements>
 				</>
 			);
 		}
@@ -49,7 +49,7 @@ const PreviewMarkup = ({ tokens }: PreviewMarkupProps): ReactElement | null => {
 
 			return (
 				<>
-					{firstTask.status ? '\u2611' : '\u2610'} <PreviewInlineElements children={firstTask.value} />
+					{firstTask.status ? '\u2611' : '\u2610'} <PreviewInlineElements>{firstTask.value}</PreviewInlineElements>
 				</>
 			);
 		}
@@ -59,7 +59,7 @@ const PreviewMarkup = ({ tokens }: PreviewMarkupProps): ReactElement | null => {
 
 			return (
 				<>
-					&gt; <PreviewInlineElements children={firstParagraph.value} />
+					&gt; <PreviewInlineElements>{firstParagraph.value}</PreviewInlineElements>
 				</>
 			);
 		}
diff --git a/packages/gazzodown/src/blocks/OrderedListBlock.tsx b/packages/gazzodown/src/blocks/OrderedListBlock.tsx
index 276ab6c2b2752..6c6fc2734e34b 100644
--- a/packages/gazzodown/src/blocks/OrderedListBlock.tsx
+++ b/packages/gazzodown/src/blocks/OrderedListBlock.tsx
@@ -11,7 +11,7 @@ const OrderedListBlock = ({ items }: OrderedListBlockProps): ReactElement => (
 	<ol>
 		{items.map(({ value, number }, index) => (
 			<li key={index} value={number}>
-				<InlineElements children={value} />
+				<InlineElements>{value}</InlineElements>
 			</li>
 		))}
 	</ol>
diff --git a/packages/gazzodown/src/blocks/ParagraphBlock.tsx b/packages/gazzodown/src/blocks/ParagraphBlock.tsx
index 146786a6493c5..c8e578d2e2653 100644
--- a/packages/gazzodown/src/blocks/ParagraphBlock.tsx
+++ b/packages/gazzodown/src/blocks/ParagraphBlock.tsx
@@ -9,7 +9,7 @@ type ParagraphBlockProps = {
 
 const ParagraphBlock = ({ children }: ParagraphBlockProps): ReactElement => (
 	<div>
-		<InlineElements children={children} />
+		<InlineElements>{children}</InlineElements>
 	</div>
 );
 
diff --git a/packages/gazzodown/src/blocks/QuoteBlock.tsx b/packages/gazzodown/src/blocks/QuoteBlock.tsx
index 3e4cb15dee73a..4e56bbfe21535 100644
--- a/packages/gazzodown/src/blocks/QuoteBlock.tsx
+++ b/packages/gazzodown/src/blocks/QuoteBlock.tsx
@@ -10,7 +10,7 @@ type QuoteBlockProps = {
 const QuoteBlock = ({ children }: QuoteBlockProps): ReactElement => (
 	<blockquote>
 		{children.map((paragraph, index) => (
-			<ParagraphBlock key={index} children={paragraph.value} />
+			<ParagraphBlock key={index}>{paragraph.value}</ParagraphBlock>
 		))}
 	</blockquote>
 );
diff --git a/packages/gazzodown/src/blocks/TaskListBlock.tsx b/packages/gazzodown/src/blocks/TaskListBlock.tsx
index de24fbbf5d079..8e1e67596d0d5 100644
--- a/packages/gazzodown/src/blocks/TaskListBlock.tsx
+++ b/packages/gazzodown/src/blocks/TaskListBlock.tsx
@@ -17,7 +17,7 @@ const TaksListBlock = ({ tasks }: TaskListBlockProps): ReactElement => {
 		<ul className='task-list'>
 			{tasks.map((item, index) => (
 				<li key={index}>
-					<CheckBox checked={item.status} onChange={onTaskChecked?.(item)} /> <InlineElements children={item.value} />
+					<CheckBox checked={item.status} onChange={onTaskChecked?.(item)} /> <InlineElements>{item.value}</InlineElements>
 				</li>
 			))}
 		</ul>
diff --git a/packages/gazzodown/src/blocks/UnorderedListBlock.tsx b/packages/gazzodown/src/blocks/UnorderedListBlock.tsx
index 93874fd14010b..500e525011107 100644
--- a/packages/gazzodown/src/blocks/UnorderedListBlock.tsx
+++ b/packages/gazzodown/src/blocks/UnorderedListBlock.tsx
@@ -11,7 +11,7 @@ const UnorderedListBlock = ({ items }: UnorderedListBlockProps): ReactElement =>
 	<ul>
 		{items.map((item, index) => (
 			<li key={index}>
-				<InlineElements children={item.value} />
+				<InlineElements>{item.value}</InlineElements>
 			</li>
 		))}
 	</ul>
diff --git a/packages/gazzodown/src/elements/BoldSpan.tsx b/packages/gazzodown/src/elements/BoldSpan.tsx
index 81fcc91f66c6b..00aa8743d0e84 100644
--- a/packages/gazzodown/src/elements/BoldSpan.tsx
+++ b/packages/gazzodown/src/elements/BoldSpan.tsx
@@ -57,10 +57,10 @@ const renderBlockComponent = (block: MessageBlock, index: number): ReactElement
 			return <LinkSpan key={index} href={block.value.src.value} label={block.value.label} />;
 
 		case 'STRIKE':
-			return <StrikeSpan key={index} children={block.value} />;
+			return <StrikeSpan key={index}>{block.value}</StrikeSpan>;
 
 		case 'ITALIC':
-			return <ItalicSpan key={index} children={block.value} />;
+			return <ItalicSpan key={index}>{block.value}</ItalicSpan>;
 
 		case 'INLINE_CODE':
 			return <CodeElement key={index} code={block.value.value} />;
diff --git a/packages/gazzodown/src/elements/InlineElements.tsx b/packages/gazzodown/src/elements/InlineElements.tsx
index 5ef947460d16b..4da143180cfb3 100644
--- a/packages/gazzodown/src/elements/InlineElements.tsx
+++ b/packages/gazzodown/src/elements/InlineElements.tsx
@@ -27,13 +27,13 @@ const InlineElements = ({ children }: InlineElementsProps): ReactElement => (
 		{children.map((child, index) => {
 			switch (child.type) {
 				case 'BOLD':
-					return <BoldSpan key={index} children={child.value} />;
+					return <BoldSpan key={index}>{child.value}</BoldSpan>;
 
 				case 'STRIKE':
-					return <StrikeSpan key={index} children={child.value} />;
+					return <StrikeSpan key={index}>{child.value}</StrikeSpan>;
 
 				case 'ITALIC':
-					return <ItalicSpan key={index} children={child.value} />;
+					return <ItalicSpan key={index}>{child.value}</ItalicSpan>;
 
 				case 'LINK':
 					return (
@@ -73,12 +73,12 @@ const InlineElements = ({ children }: InlineElementsProps): ReactElement => (
 					);
 
 				case 'TIMESTAMP': {
-					return <Timestamp key={index} children={child} />;
+					return <Timestamp key={index}>{child}</Timestamp>;
 				}
 
 				default: {
 					if ('fallback' in child) {
-						return <InlineElements key={index} children={[child.fallback]} />;
+						return <InlineElements key={index}>{[child.fallback]}</InlineElements>;
 					}
 					return null;
 				}
diff --git a/packages/gazzodown/src/elements/ItalicSpan.tsx b/packages/gazzodown/src/elements/ItalicSpan.tsx
index 946a28bdac3f8..0e683120f7d9d 100644
--- a/packages/gazzodown/src/elements/ItalicSpan.tsx
+++ b/packages/gazzodown/src/elements/ItalicSpan.tsx
@@ -57,10 +57,10 @@ const renderBlockComponent = (block: MessageBlock, index: number): ReactElement
 			return <LinkSpan key={index} href={block.value.src.value} label={block.value.label} />;
 
 		case 'STRIKE':
-			return <StrikeSpan key={index} children={block.value} />;
+			return <StrikeSpan key={index}>{block.value}</StrikeSpan>;
 
 		case 'BOLD':
-			return <BoldSpan key={index} children={block.value} />;
+			return <BoldSpan key={index}>{block.value}</BoldSpan>;
 
 		case 'INLINE_CODE':
 			return <CodeElement key={index} code={block.value.value} />;
diff --git a/packages/gazzodown/src/elements/LinkSpan.tsx b/packages/gazzodown/src/elements/LinkSpan.tsx
index 78120c376fb25..ba234e65d3c42 100644
--- a/packages/gazzodown/src/elements/LinkSpan.tsx
+++ b/packages/gazzodown/src/elements/LinkSpan.tsx
@@ -29,13 +29,13 @@ const LinkSpan = ({ href, label }: LinkSpanProps): ReactElement => {
 					return <PlainSpan key={index} text={child.value} />;
 
 				case 'STRIKE':
-					return <StrikeSpan key={index} children={child.value} />;
+					return <StrikeSpan key={index}>{child.value}</StrikeSpan>;
 
 				case 'ITALIC':
-					return <ItalicSpan key={index} children={child.value} />;
+					return <ItalicSpan key={index}>{child.value}</ItalicSpan>;
 
 				case 'BOLD':
-					return <BoldSpan key={index} children={child.value} />;
+					return <BoldSpan key={index}>{child.value}</BoldSpan>;
 
 				default:
 					return null;
diff --git a/packages/gazzodown/src/elements/PreviewInlineElements.tsx b/packages/gazzodown/src/elements/PreviewInlineElements.tsx
index 3b17c7a279349..37f1e0d189f43 100644
--- a/packages/gazzodown/src/elements/PreviewInlineElements.tsx
+++ b/packages/gazzodown/src/elements/PreviewInlineElements.tsx
@@ -22,24 +22,26 @@ const PreviewInlineElements = ({ children }: PreviewInlineElementsProps): ReactE
 		{children.map((child, index) => {
 			switch (child.type) {
 				case 'BOLD':
-					return <BoldSpan key={index} children={child.value} />;
+					return <BoldSpan key={index}>{child.value}</BoldSpan>;
 
 				case 'STRIKE':
-					return <StrikeSpan key={index} children={child.value} />;
+					return <StrikeSpan key={index}>{child.value}</StrikeSpan>;
 
 				case 'ITALIC':
-					return <ItalicSpan key={index} children={child.value} />;
+					return <ItalicSpan key={index}>{child.value}</ItalicSpan>;
 
 				case 'LINK':
 					return (
-						<PreviewInlineElements key={index} children={Array.isArray(child.value.label) ? child.value.label : [child.value.label]} />
+						<PreviewInlineElements key={index}>
+							{Array.isArray(child.value.label) ? child.value.label : [child.value.label]}
+						</PreviewInlineElements>
 					);
 
 				case 'PLAIN_TEXT':
-					return <Fragment key={index} children={child.value} />;
+					return <Fragment key={index}>{child.value}</Fragment>;
 
 				case 'IMAGE':
-					return <PreviewInlineElements key={index} children={[child.value.label]} />;
+					return <PreviewInlineElements key={index}>{[child.value.label]}</PreviewInlineElements>;
 
 				case 'MENTION_USER':
 					return <PreviewUserMentionElement key={index} mention={child.value.value} />;
diff --git a/packages/gazzodown/src/elements/StrikeSpan.tsx b/packages/gazzodown/src/elements/StrikeSpan.tsx
index 138a9c359ddea..ac2875559c879 100644
--- a/packages/gazzodown/src/elements/StrikeSpan.tsx
+++ b/packages/gazzodown/src/elements/StrikeSpan.tsx
@@ -58,10 +58,10 @@ const renderBlockComponent = (block: MessageBlock, index: number): ReactElement
 			return <LinkSpan key={index} href={block.value.src.value} label={block.value.label} />;
 
 		case 'ITALIC':
-			return <ItalicSpan key={index} children={block.value} />;
+			return <ItalicSpan key={index}>{block.value}</ItalicSpan>;
 
 		case 'BOLD':
-			return <BoldSpan key={index} children={block.value} />;
+			return <BoldSpan key={index}>{block.value}</BoldSpan>;
 
 		case 'INLINE_CODE':
 			return <CodeElement key={index} code={block.value.value} />;
diff --git a/packages/gazzodown/src/katex/KatexErrorBoundary.tsx b/packages/gazzodown/src/katex/KatexErrorBoundary.tsx
index 14139fd7b8d69..a1bdeffdb9a35 100644
--- a/packages/gazzodown/src/katex/KatexErrorBoundary.tsx
+++ b/packages/gazzodown/src/katex/KatexErrorBoundary.tsx
@@ -13,7 +13,11 @@ const Fallback = styled('span')`
 
 const KatexErrorBoundary = ({ children, code }: KatexErrorBoundaryProps): ReactElement => {
 	const [error, setError] = useState<Error | null>(null);
-	return <ErrorBoundary children={children} onError={setError} fallback={<Fallback title={error?.message}>{code}</Fallback>} />;
+	return (
+		<ErrorBoundary onError={setError} fallback={<Fallback title={error?.message}>{code}</Fallback>}>
+			{children}
+		</ErrorBoundary>
+	);
 };
 
 export default KatexErrorBoundary;
diff --git a/packages/livechat/.eslintrc.json b/packages/livechat/.eslintrc.json
index d547f05ea619c..575d6b1bc5040 100644
--- a/packages/livechat/.eslintrc.json
+++ b/packages/livechat/.eslintrc.json
@@ -43,6 +43,7 @@
 		],
 		"react/jsx-uses-react": "error",
 		"react/jsx-uses-vars": "error",
+		"react/no-children-prop": "error",
 		"react/no-danger": "warn",
 		"react/no-deprecated": "error",
 		"react/no-did-mount-set-state": "error",
diff --git a/packages/livechat/src/components/Messages/MessageBlocks/stories.tsx b/packages/livechat/src/components/Messages/MessageBlocks/stories.tsx
index 9631d5303ae24..693f91aa1a925 100644
--- a/packages/livechat/src/components/Messages/MessageBlocks/stories.tsx
+++ b/packages/livechat/src/components/Messages/MessageBlocks/stories.tsx
@@ -10,7 +10,7 @@ export default {
 	parameters: {
 		layout: 'fullscreen',
 	},
-	decorators: [(storyFn) => <PopoverContainer children={storyFn()} />],
+	decorators: [(storyFn) => <PopoverContainer>{storyFn()}</PopoverContainer>],
 } satisfies Meta<ComponentProps<typeof MessageBlocks>>;
 
 export const WithBlocks: StoryFn<ComponentProps<typeof MessageBlocks>> = () => (
diff --git a/packages/livechat/src/components/uiKit/message/ActionsBlock.stories.tsx b/packages/livechat/src/components/uiKit/message/ActionsBlock.stories.tsx
index ca104eea52bd5..37d4ebfdab10c 100644
--- a/packages/livechat/src/components/uiKit/message/ActionsBlock.stories.tsx
+++ b/packages/livechat/src/components/uiKit/message/ActionsBlock.stories.tsx
@@ -10,15 +10,16 @@ export default {
 		layout: 'centered',
 	},
 	decorators: [
-		(storyFn) => <div children={storyFn()} style={{ width: '100vw', maxWidth: 500 }} />,
+		(storyFn) => <div style={{ width: '100vw', maxWidth: 500 }}>{storyFn()}</div>,
 		(storyFn) => (
 			<Surface
-				children={storyFn()}
 				dispatchAction={async (payload: unknown) => {
 					await new Promise((resolve) => setTimeout(resolve, 1000));
 					action('dispatchAction')(payload);
 				}}
-			/>
+			>
+				{storyFn()}
+			</Surface>
 		),
 	],
 } satisfies Meta;
diff --git a/packages/livechat/src/components/uiKit/message/Block.tsx b/packages/livechat/src/components/uiKit/message/Block.tsx
index a6b8e371de8b3..485a3992c2851 100644
--- a/packages/livechat/src/components/uiKit/message/Block.tsx
+++ b/packages/livechat/src/components/uiKit/message/Block.tsx
@@ -16,12 +16,13 @@ type BlockProps = {
 
 const Block = ({ appId, blockId, children }: BlockProps) => (
 	<BlockContext.Provider
-		children={children}
 		value={{
 			appId,
 			blockId,
 		}}
-	/>
+	>
+		{children}
+	</BlockContext.Provider>
 );
 
 export const usePerformAction = (actionId: string) => {
diff --git a/packages/livechat/src/components/uiKit/message/ButtonElement/index.tsx b/packages/livechat/src/components/uiKit/message/ButtonElement/index.tsx
index cab76bddad55c..d2c60cd591865 100644
--- a/packages/livechat/src/components/uiKit/message/ButtonElement/index.tsx
+++ b/packages/livechat/src/components/uiKit/message/ButtonElement/index.tsx
@@ -42,7 +42,6 @@ const ButtonElement = ({ text, actionId, url, value, style, context, confirm, pa
 
 	return (
 		<button
-			children={parser.text(text)}
 			className={createClassName(styles, 'uikit-button', {
 				style,
 				accessory: context === uikit.BlockContext.SECTION,
@@ -52,7 +51,9 @@ const ButtonElement = ({ text, actionId, url, value, style, context, confirm, pa
 			type='button'
 			onClick={handleClick}
 			onMouseUp={handleMouseUp}
-		/>
+		>
+			{parser.text(text)}
+		</button>
 	);
 };
 
diff --git a/packages/livechat/src/components/uiKit/message/ButtonElement/stories.tsx b/packages/livechat/src/components/uiKit/message/ButtonElement/stories.tsx
index 32675b61e505d..e06d5ea36c75b 100644
--- a/packages/livechat/src/components/uiKit/message/ButtonElement/stories.tsx
+++ b/packages/livechat/src/components/uiKit/message/ButtonElement/stories.tsx
@@ -29,12 +29,13 @@ export default {
 	decorators: [
 		(storyFn) => (
 			<Surface
-				children={storyFn()}
 				dispatchAction={async (payload: unknown) => {
 					await new Promise((resolve) => setTimeout(resolve, 1000));
 					action('dispatchAction')(payload);
 				}}
-			/>
+			>
+				{storyFn()}
+			</Surface>
 		),
 	],
 	parameters: {
diff --git a/packages/livechat/src/components/uiKit/message/ContextBlock.stories.tsx b/packages/livechat/src/components/uiKit/message/ContextBlock.stories.tsx
index 4438897c1caf7..04ad34ed012fe 100644
--- a/packages/livechat/src/components/uiKit/message/ContextBlock.stories.tsx
+++ b/packages/livechat/src/components/uiKit/message/ContextBlock.stories.tsx
@@ -8,7 +8,7 @@ export default {
 	parameters: {
 		layout: 'centered',
 	},
-	decorators: [(storyFn) => <div children={storyFn()} style={{ width: '100vw', maxWidth: 500 }} />],
+	decorators: [(storyFn) => <div style={{ width: '100vw', maxWidth: 500 }}>{storyFn()}</div>],
 } satisfies Meta;
 
 export const PlainText = () =>
diff --git a/packages/livechat/src/components/uiKit/message/DividerBlock.stories.tsx b/packages/livechat/src/components/uiKit/message/DividerBlock.stories.tsx
index 17e952248c13b..03cdf0485f238 100644
--- a/packages/livechat/src/components/uiKit/message/DividerBlock.stories.tsx
+++ b/packages/livechat/src/components/uiKit/message/DividerBlock.stories.tsx
@@ -7,7 +7,7 @@ export default {
 	parameters: {
 		layout: 'centered',
 	},
-	decorators: [(storyFn) => <div children={storyFn()} style={{ width: '100vw', maxWidth: 500 }} />],
+	decorators: [(storyFn) => <div style={{ width: '100vw', maxWidth: 500 }}>{storyFn()}</div>],
 } satisfies Meta;
 
 export const Default = () =>
diff --git a/packages/livechat/src/components/uiKit/message/ImageBlock.stories.tsx b/packages/livechat/src/components/uiKit/message/ImageBlock.stories.tsx
index ed24559f7878a..46a304d5f08bd 100644
--- a/packages/livechat/src/components/uiKit/message/ImageBlock.stories.tsx
+++ b/packages/livechat/src/components/uiKit/message/ImageBlock.stories.tsx
@@ -8,7 +8,7 @@ export default {
 	parameters: {
 		layout: 'centered',
 	},
-	decorators: [(storyFn) => <div children={storyFn()} style={{ width: '100vw', maxWidth: 500 }} />],
+	decorators: [(storyFn) => <div style={{ width: '100vw', maxWidth: 500 }}>{storyFn()}</div>],
 } satisfies Meta;
 
 export const WithTitle = () =>
diff --git a/packages/livechat/src/components/uiKit/message/ImageBlock/index.tsx b/packages/livechat/src/components/uiKit/message/ImageBlock/index.tsx
index b9801b13ebe47..2ce10824be32d 100644
--- a/packages/livechat/src/components/uiKit/message/ImageBlock/index.tsx
+++ b/packages/livechat/src/components/uiKit/message/ImageBlock/index.tsx
@@ -70,14 +70,15 @@ const ImageBlock = ({ appId, blockId, title, imageUrl, altText, parser }: ImageB
 				<div className={createClassName(styles, 'uikit-image-block__content', { loading })} style={contentStyle}>
 					<div className={createClassName(styles, 'uikit-image-block__wrapper')} style={wrapperStyle}>
 						<a
-							children={imageUrl}
 							className={createClassName(styles, 'uikit-image-block__link')}
 							href={imageUrl}
 							rel='noopener noreferrer'
 							style={linkStyle}
 							target='_blank'
 							title={altText}
-						/>
+						>
+							{imageUrl}
+						</a>
 					</div>
 				</div>
 			</div>
diff --git a/packages/livechat/src/components/uiKit/message/SectionBlock.stories.tsx b/packages/livechat/src/components/uiKit/message/SectionBlock.stories.tsx
index 23c656a425d7b..a108c31da7652 100644
--- a/packages/livechat/src/components/uiKit/message/SectionBlock.stories.tsx
+++ b/packages/livechat/src/components/uiKit/message/SectionBlock.stories.tsx
@@ -12,16 +12,17 @@ export default {
 		layout: 'centered',
 	},
 	decorators: [
-		(storyFn) => <div children={storyFn()} style={{ width: '100vw', maxWidth: 500 }} />,
-		(storyFn) => <PopoverContainer children={storyFn()} />,
+		(storyFn) => <div style={{ width: '100vw', maxWidth: 500 }}>{storyFn()}</div>,
+		(storyFn) => <PopoverContainer>{storyFn()}</PopoverContainer>,
 		(storyFn) => (
 			<Surface
-				children={storyFn()}
 				dispatchAction={async (payload: unknown) => {
 					await new Promise((resolve) => setTimeout(resolve, 1000));
 					action('dispatchAction')(payload);
 				}}
-			/>
+			>
+				{storyFn()}
+			</Surface>
 		),
 	],
 } satisfies Meta;
diff --git a/packages/livechat/src/components/uiKit/message/Surface.tsx b/packages/livechat/src/components/uiKit/message/Surface.tsx
index 2ca22907c502b..255d382517042 100644
--- a/packages/livechat/src/components/uiKit/message/Surface.tsx
+++ b/packages/livechat/src/components/uiKit/message/Surface.tsx
@@ -17,11 +17,12 @@ type SurfaceProps = {
 
 const Surface = ({ children, dispatchAction }: SurfaceProps) => (
 	<SurfaceContext.Provider
-		children={children}
 		value={{
 			dispatchAction,
 		}}
-	/>
+	>
+		{children}
+	</SurfaceContext.Provider>
 );
 
 export const useDispatchAction = () => useContext(SurfaceContext).dispatchAction;
diff --git a/packages/livechat/src/providers/ServerProvider.tsx b/packages/livechat/src/providers/ServerProvider.tsx
index 606cb75ddd66c..6f3eedd97369f 100644
--- a/packages/livechat/src/providers/ServerProvider.tsx
+++ b/packages/livechat/src/providers/ServerProvider.tsx
@@ -155,7 +155,7 @@ const ServerProvider = ({ children }: { children: ComponentChildren }) => {
 		return contextValue;
 	}, [sdk, status, token]);
 
-	return <ServerContext.Provider children={children} value={contextValue} />;
+	return <ServerContext.Provider value={contextValue}>{children}</ServerContext.Provider>;
 };
 
 export default ServerProvider;
diff --git a/packages/ui-client/src/components/AnchorPortal.spec.tsx b/packages/ui-client/src/components/AnchorPortal.spec.tsx
index dd9a5a3dae9ea..20423f777e157 100644
--- a/packages/ui-client/src/components/AnchorPortal.spec.tsx
+++ b/packages/ui-client/src/components/AnchorPortal.spec.tsx
@@ -3,16 +3,28 @@ import { render, screen } from '@testing-library/react';
 import AnchorPortal from './AnchorPortal';
 
 it('should render children', () => {
-	render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example' />} />);
+	render(
+		<AnchorPortal id='test-anchor'>
+			<div role='presentation' aria-label='example' />
+		</AnchorPortal>,
+	);
 
 	expect(screen.getByRole('presentation', { name: 'example' })).toBeInTheDocument();
 });
 
 it('should not recreate the anchor element', () => {
-	render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example A' />} />);
+	render(
+		<AnchorPortal id='test-anchor'>
+			<div role='presentation' aria-label='example A' />
+		</AnchorPortal>,
+	);
 	const anchorA = document.getElementById('test-anchor');
 
-	render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example B' />} />);
+	render(
+		<AnchorPortal id='test-anchor'>
+			<div role='presentation' aria-label='example B' />
+		</AnchorPortal>,
+	);
 	const anchorB = document.getElementById('test-anchor');
 
 	expect(anchorA).toBe(anchorB);
@@ -21,7 +33,11 @@ it('should not recreate the anchor element', () => {
 });
 
 it('should remove the anchor element when unmounted', () => {
-	const { unmount } = render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example' />} />);
+	const { unmount } = render(
+		<AnchorPortal id='test-anchor'>
+			<div role='presentation' aria-label='example' />
+		</AnchorPortal>,
+	);
 	expect(document.getElementById('test-anchor')).toBeInTheDocument();
 
 	unmount();
@@ -29,10 +45,18 @@ it('should remove the anchor element when unmounted', () => {
 });
 
 it('should not remove the anchor element after unmounting if there are other portals with the same id', () => {
-	const { unmount } = render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example' />} />);
+	const { unmount } = render(
+		<AnchorPortal id='test-anchor'>
+			<div role='presentation' aria-label='example' />
+		</AnchorPortal>,
+	);
 	expect(document.getElementById('test-anchor')).toBeInTheDocument();
 
-	render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example' />} />);
+	render(
+		<AnchorPortal id='test-anchor'>
+			<div role='presentation' aria-label='example' />
+		</AnchorPortal>,
+	);
 	unmount();
 
 	expect(document.getElementById('test-anchor')).toBeInTheDocument();
diff --git a/packages/ui-client/src/components/Modal/ModalBackdrop.tsx b/packages/ui-client/src/components/Modal/ModalBackdrop.tsx
index 4a11349d10796..9ae1b9cacdc92 100644
--- a/packages/ui-client/src/components/Modal/ModalBackdrop.tsx
+++ b/packages/ui-client/src/components/Modal/ModalBackdrop.tsx
@@ -81,7 +81,6 @@ const ModalBackdrop = ({ children, onDismiss }: ModalBackdropProps) => {
 	return (
 		<Box
 			ref={ref}
-			children={children}
 			className='rcx-modal__backdrop'
 			position='fixed'
 			zIndex={9999}
@@ -90,7 +89,9 @@ const ModalBackdrop = ({ children, onDismiss }: ModalBackdropProps) => {
 			flexDirection='column'
 			onMouseDown={onMouseDown}
 			onMouseUp={onMouseUp}
-		/>
+		>
+			{children}
+		</Box>
 	);
 };
 
diff --git a/packages/ui-client/src/components/Page/Page.stories.tsx b/packages/ui-client/src/components/Page/Page.stories.tsx
index f51996eecbc3e..e77b0db9d6ba2 100644
--- a/packages/ui-client/src/components/Page/Page.stories.tsx
+++ b/packages/ui-client/src/components/Page/Page.stories.tsx
@@ -24,7 +24,9 @@ export default {
 const DummyContent = ({ rows = 10 }: { rows?: number }) => (
 	<>
 		{Array.from({ length: rows }, (_, i) => (
-			<Box key={i} children='Content slice' marginBlock={16} />
+			<Box key={i} marginBlock={16}>
+				Content slice
+			</Box>
 		))}
 	</>
 );
diff --git a/packages/ui-client/src/providers/ModalProvider/ModalProvider.tsx b/packages/ui-client/src/providers/ModalProvider/ModalProvider.tsx
index ac97ce8d89fef..4fed55cec20fd 100644
--- a/packages/ui-client/src/providers/ModalProvider/ModalProvider.tsx
+++ b/packages/ui-client/src/providers/ModalProvider/ModalProvider.tsx
@@ -35,7 +35,7 @@ const ModalProvider = ({ children, region }: ModalProviderProps) => {
 		[currentModal?.node, currentModal?.region, region, setModal],
 	);
 
-	return <ModalContext.Provider value={contextValue} children={children} />;
+	return <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>;
 };
 
 export default memo<typeof ModalProvider>(ModalProvider);
diff --git a/packages/web-ui-registration/src/LoginServices.tsx b/packages/web-ui-registration/src/LoginServices.tsx
index a5068fbaac3fc..e36c032e0436f 100644
--- a/packages/web-ui-registration/src/LoginServices.tsx
+++ b/packages/web-ui-registration/src/LoginServices.tsx
@@ -23,7 +23,11 @@ const LoginServices = ({
 
 	return (
 		<>
-			{showFormLogin && <Divider mb={24} p={0} children={t('registration.component.form.divider')} />}
+			{showFormLogin && (
+				<Divider mb={24} p={0}>
+					{t('registration.component.form.divider')}
+				</Divider>
+			)}
 			<ButtonGroup vertical stretch small>
 				{services.map((service) => (
 					<LoginServicesButton disabled={disabled} key={service.service} {...service} setError={setError} />
diff --git a/yarn.lock b/yarn.lock
index 1651c307f759f..f751484c0b8c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10523,6 +10523,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:~4.5.2"
     codemirror: "npm:^6.0.2"
     eslint: "npm:~8.45.0"
+    eslint-plugin-react: "npm:~7.37.5"
     eslint-plugin-react-hooks: "npm:^5.0.0"
     eslint-plugin-react-refresh: "npm:^0.4.24"
     eslint4b-prebuilt: "npm:^6.7.2"