From cf6dc5d5e277a7e1c90728d88addb3e01030f785 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 3 Jun 2026 22:39:53 -0300
Subject: [PATCH] refactor: update event types from FormEvent to ChangeEvent in
 various components

- Changed event types from FormEvent to ChangeEvent in MatrixFederationManageServerModal, MatrixFederationSearchModalContent, TwoFactorEmail, TwoFactorTOTP, AddCustomSound, EditSound, NewImportPage, PermissionsTableFilter, BooleanSettingInput, FontSettingInput, GenericSettingInput, IntSettingInput, PasswordSettingInput, RelativeUrlSettingInput, StringSettingInput, TimespanSettingInput, SettingsGroupPage, LDAPGroupPage, UsersTableFilters, DateRangePicker, CallHistoryPageFilters, Omnichannel analytics DateRangePicker, CannedResponseList, DepartmentTags, RemoveContactModal, QuickActionOptions, MessageBox, RoomMembers, ThreadList, MultiSelectCustomList, and useMediaSession.
---
 .../NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx      | 4 ++--
 .../MatrixFederationManageServerModal.tsx                   | 4 ++--
 .../MatrixFederationSearchModalContent.tsx                  | 4 ++--
 .../meteor/client/views/account/security/TwoFactorEmail.tsx | 4 ++--
 apps/meteor/client/views/account/security/TwoFactorTOTP.tsx | 4 ++--
 .../client/views/admin/customSounds/AddCustomSound.tsx      | 4 ++--
 apps/meteor/client/views/admin/customSounds/EditSound.tsx   | 4 ++--
 apps/meteor/client/views/admin/import/NewImportPage.tsx     | 6 +++---
 .../permissions/PermissionsTable/PermissionsTableFilter.tsx | 4 ++--
 .../admin/settings/Setting/inputs/BooleanSettingInput.tsx   | 4 ++--
 .../admin/settings/Setting/inputs/FontSettingInput.tsx      | 4 ++--
 .../admin/settings/Setting/inputs/GenericSettingInput.tsx   | 4 ++--
 .../views/admin/settings/Setting/inputs/IntSettingInput.tsx | 4 ++--
 .../admin/settings/Setting/inputs/PasswordSettingInput.tsx  | 4 ++--
 .../settings/Setting/inputs/RelativeUrlSettingInput.tsx     | 4 ++--
 .../admin/settings/Setting/inputs/StringSettingInput.tsx    | 4 ++--
 .../admin/settings/Setting/inputs/TimespanSettingInput.tsx  | 4 ++--
 .../admin/settings/SettingsGroupPage/SettingsGroupPage.tsx  | 2 +-
 .../client/views/admin/settings/groups/LDAPGroupPage.tsx    | 6 +++---
 .../views/admin/users/UsersTable/UsersTableFilters.tsx      | 6 +++---
 .../client/views/audit/components/forms/DateRangePicker.tsx | 6 +++---
 .../views/mediaCallHistory/CallHistoryPageFilters.tsx       | 6 +++---
 .../client/views/omnichannel/analytics/DateRangePicker.tsx  | 6 +++---
 .../contextualBar/CannedResponse/CannedResponseList.tsx     | 4 ++--
 .../client/views/omnichannel/departments/DepartmentTags.tsx | 4 ++--
 .../omnichannel/directory/contacts/RemoveContactModal.tsx   | 4 ++--
 .../Header/Omnichannel/QuickActions/QuickActionOptions.tsx  | 2 +-
 .../client/views/room/composer/messageBox/MessageBox.tsx    | 2 +-
 .../views/room/contextualBar/RoomMembers/RoomMembers.tsx    | 4 ++--
 .../client/views/room/contextualBar/Threads/ThreadList.tsx  | 4 ++--
 .../components/MultiSelectCustom/MultiSelectCustomList.tsx  | 6 +++---
 packages/ui-voip/src/providers/useMediaSession.ts           | 2 +-
 .../CallHistoryContextualbar/CallHistoryActions.stories.tsx | 6 +++---
 33 files changed, 70 insertions(+), 70 deletions(-)

diff --git a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx
index e5cc289312bda..bbe2df4d903be 100644
--- a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx
+++ b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx
@@ -20,7 +20,7 @@ import {
 } from '@rocket.chat/fuselage';
 import { useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { ChangeEvent, ComponentProps, FormEvent } from 'react';
+import type { ChangeEvent, ComponentProps } from 'react';
 import { useState, useCallback, useId } from 'react';
 
 import UserStatusMenu from '../../../components/UserStatusMenu';
@@ -76,7 +76,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
 			wrapperFunction={(props: ComponentProps<typeof Box>) => (
 				<Box
 					is='form'
-					onSubmit={(e: FormEvent) => {
+					onSubmit={(e) => {
 						e.preventDefault();
 						handleSaveStatus();
 					}}
diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx
index 2baaeac8753bd..c96b5d966bb5f 100644
--- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx
+++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx
@@ -18,7 +18,7 @@ import {
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useSetModal, useTranslation, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useState } from 'react';
 
 import MatrixFederationRemoveServerList from './MatrixFederationRemoveServerList';
@@ -90,7 +90,7 @@ const MatrixFederationAddServerModal = ({ onClickClose }: MatrixFederationAddSer
 						<TextInput
 							disabled={isPending}
 							value={serverName}
-							onChange={(e: FormEvent<HTMLInputElement>) => {
+							onChange={(e: ChangeEvent<HTMLInputElement>) => {
 								setServerName(e.currentTarget.value);
 								if (errorKey) {
 									setErrorKey(undefined);
diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx
index 853df819ddbb5..ff5f5ab94fc15 100644
--- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx
+++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx
@@ -2,7 +2,7 @@ import type { SelectOption } from '@rocket.chat/fuselage';
 import { Box, Select, TextInput } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useSetModal } from '@rocket.chat/ui-contexts';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useCallback, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -53,7 +53,7 @@ const MatrixFederationSearchModalContent = ({ defaultSelectedServer, servers }:
 					flexGrow={4}
 					flexShrink={0}
 					value={roomName}
-					onChange={(e: FormEvent<HTMLInputElement>) => setRoomName(e.currentTarget.value)}
+					onChange={(e: ChangeEvent<HTMLInputElement>) => setRoomName(e.currentTarget.value)}
 				/>
 			</Box>
 			<Box is='a' display='flex' flexDirection='row' mbe={16} onClick={manageServers}>
diff --git a/apps/meteor/client/views/account/security/TwoFactorEmail.tsx b/apps/meteor/client/views/account/security/TwoFactorEmail.tsx
index 17c261e8df5a0..5929662999cb2 100644
--- a/apps/meteor/client/views/account/security/TwoFactorEmail.tsx
+++ b/apps/meteor/client/views/account/security/TwoFactorEmail.tsx
@@ -1,6 +1,6 @@
 import { Box, Field, FieldLabel, FieldRow, Margins, ToggleSwitch } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useUser } from '@rocket.chat/ui-contexts';
-import type { ComponentProps, FormEvent } from 'react';
+import type { ComponentProps, ChangeEvent } from 'react';
 import { useCallback, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -27,7 +27,7 @@ const TwoFactorEmail = (props: ComponentProps<typeof Box>) => {
 	});
 
 	const handleEnable = useCallback(
-		async (e: FormEvent<HTMLInputElement>) => {
+		async (e: ChangeEvent<HTMLInputElement>) => {
 			if (e.currentTarget.checked) {
 				await enable2faAction();
 			} else {
diff --git a/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx b/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx
index 26c51e32702b5..7bfb8cc3876d2 100644
--- a/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx
+++ b/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, TextInput, Margins, Field, FieldRow, FieldLabel, ToggleSwitch } from '@rocket.chat/fuselage';
 import { useEffectEvent, useSafely } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useUser, useMethod } from '@rocket.chat/ui-contexts';
-import type { ComponentPropsWithoutRef, FormEvent } from 'react';
+import type { ComponentPropsWithoutRef, ChangeEvent } from 'react';
 import { useState, useCallback, useEffect, useId } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -92,7 +92,7 @@ const TwoFactorTOTP = (props: TwoFactorTOTPProps) => {
 		setModal(<TwoFactorTotpModal onConfirm={onDisable} onClose={closeModal} />);
 	});
 
-	const handleToggleTotp = useEffectEvent(async (e: FormEvent<HTMLInputElement>) => {
+	const handleToggleTotp = useEffectEvent(async (e: ChangeEvent<HTMLInputElement>) => {
 		if (e.currentTarget?.checked) {
 			void enableTotp();
 		} else {
diff --git a/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx b/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx
index 187b4fb317bd5..e35ac9df9db23 100644
--- a/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx
+++ b/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx
@@ -2,7 +2,7 @@ import { Field, FieldLabel, FieldRow, TextInput, Box, Margins, Button, ButtonGro
 import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, type UploadResult } from '@rocket.chat/ui-contexts';
 import fileSize from 'filesize';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -86,7 +86,7 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr
 					<FieldRow>
 						<TextInput
 							value={name}
-							onChange={(e: FormEvent<HTMLInputElement>): void => setName(e.currentTarget.value)}
+							onChange={(e: ChangeEvent<HTMLInputElement>): void => setName(e.currentTarget.value)}
 							placeholder={t('Name')}
 						/>
 					</FieldRow>
diff --git a/apps/meteor/client/views/admin/customSounds/EditSound.tsx b/apps/meteor/client/views/admin/customSounds/EditSound.tsx
index 54c338e444362..9fa3043b80ee8 100644
--- a/apps/meteor/client/views/admin/customSounds/EditSound.tsx
+++ b/apps/meteor/client/views/admin/customSounds/EditSound.tsx
@@ -2,7 +2,7 @@ import { Box, Button, ButtonGroup, Margins, TextInput, Field, FieldLabel, FieldR
 import { GenericModal, ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useSetModal, useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
 import fileSize from 'filesize';
-import type { SyntheticEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useCallback, useState, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -117,7 +117,7 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps) {
 					<FieldRow>
 						<TextInput
 							value={name}
-							onChange={(e: SyntheticEvent<HTMLInputElement>): void => setName(e.currentTarget.value)}
+							onChange={(e: ChangeEvent<HTMLInputElement>): void => setName(e.currentTarget.value)}
 							placeholder={t('Name')}
 						/>
 					</FieldRow>
diff --git a/apps/meteor/client/views/admin/import/NewImportPage.tsx b/apps/meteor/client/views/admin/import/NewImportPage.tsx
index 8cd03322ed509..7fcc67e42cc33 100644
--- a/apps/meteor/client/views/admin/import/NewImportPage.tsx
+++ b/apps/meteor/client/views/admin/import/NewImportPage.tsx
@@ -19,7 +19,7 @@ import { Page, PageHeader, PageScrollableContentWithShadow } from '@rocket.chat/
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useToastMessageDispatch, useRouter, useRouteParameter, useSetting, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
-import type { ChangeEvent, DragEvent, FormEvent, Key, SyntheticEvent } from 'react';
+import type { ChangeEvent, DragEvent, Key, SyntheticEvent } from 'react';
 import { useState, useMemo, useEffect, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -146,7 +146,7 @@ function NewImportPage() {
 
 	const [fileUrl, setFileUrl] = useSafely(useState(''));
 
-	const handleFileUrlChange = (event: FormEvent<HTMLInputElement>) => {
+	const handleFileUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
 		setFileUrl(event.currentTarget.value);
 	};
 
@@ -170,7 +170,7 @@ function NewImportPage() {
 
 	const [filePath, setFilePath] = useSafely(useState(''));
 
-	const handleFilePathChange = (event: FormEvent<HTMLInputElement>) => {
+	const handleFilePathChange = (event: ChangeEvent<HTMLInputElement>) => {
 		setFilePath(event.currentTarget.value);
 	};
 
diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx
index 0137b18a47c95..b70ed82b6d7f7 100644
--- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx
+++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx
@@ -1,6 +1,6 @@
 import { TextInput } from '@rocket.chat/fuselage';
 import { useEffectEvent, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -13,7 +13,7 @@ const PermissionsTableFilter = ({ onChange }: { onChange: (debouncedFilter: stri
 		onChange(debouncedFilter);
 	}, [debouncedFilter, onChange]);
 
-	const handleFilter = useEffectEvent(({ currentTarget: { value } }: FormEvent<HTMLInputElement>) => {
+	const handleFilter = useEffectEvent(({ currentTarget: { value } }: ChangeEvent<HTMLInputElement>) => {
 		setFilter(value);
 	});
 
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx
index acb4abb5c0db3..71c4207367d83 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx
@@ -1,5 +1,5 @@
 import { Box, Field, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage';
-import type { SyntheticEvent } from 'react';
+import type { ChangeEvent } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -18,7 +18,7 @@ function BooleanSettingInput({
 	onChangeValue,
 	onResetButtonClick,
 }: BooleanSettingInputProps) {
-	const handleChange = (event: SyntheticEvent<HTMLInputElement>): void => {
+	const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
 		const value = event.currentTarget.checked;
 		onChangeValue?.(value);
 	};
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx
index 815bc657b71e6..ba65bda228428 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx
@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
-import type { FormEventHandler } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -22,7 +22,7 @@ function FontSettingInput({
 	onChangeValue,
 	onResetButtonClick,
 }: FontSettingInputProps) {
-	const handleChange: FormEventHandler<HTMLInputElement> = (event): void => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event): void => {
 		onChangeValue?.(event.currentTarget.value);
 	};
 
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx
index 0e5e901255d73..e2e93c8f01a54 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx
@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
-import type { FormEventHandler } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -22,7 +22,7 @@ function GenericSettingInput({
 	onChangeValue,
 	onResetButtonClick,
 }: GenericSettingInputProps) {
-	const handleChange: FormEventHandler<HTMLInputElement> = (event): void => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event): void => {
 		onChangeValue?.(event.currentTarget.value);
 	};
 
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx
index 7b3747ef3f474..8fda81726d045 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx
@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, InputBox } from '@rocket.chat/fuselage';
-import type { FormEventHandler } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -22,7 +22,7 @@ function IntSettingInput({
 	hasResetButton,
 	onResetButtonClick,
 }: IntSettingInputProps) {
-	const handleChange: FormEventHandler<HTMLInputElement> = (event) => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
 		onChangeValue?.(parseInt(event.currentTarget.value, 10));
 	};
 
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx
index c3e98e3fd551e..9bc582bc83855 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx
@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, PasswordInput } from '@rocket.chat/fuselage';
-import type { EventHandler, SyntheticEvent } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -20,7 +20,7 @@ function PasswordSettingInput({
 	onChangeValue,
 	onResetButtonClick,
 }: PasswordSettingInputProps) {
-	const handleChange: EventHandler<SyntheticEvent<HTMLInputElement>> = (event) => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
 		onChangeValue?.(event.currentTarget.value);
 	};
 
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx
index bf2eb629b94f3..78e42d2ed0239 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx
@@ -1,6 +1,6 @@
 import { Field, FieldHint, FieldLabel, FieldRow, UrlInput } from '@rocket.chat/fuselage';
 import { useAbsoluteUrl } from '@rocket.chat/ui-contexts';
-import type { EventHandler, SyntheticEvent } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -23,7 +23,7 @@ function RelativeUrlSettingInput({
 }: RelativeUrlSettingInputProps) {
 	const getAbsoluteUrl = useAbsoluteUrl();
 
-	const handleChange: EventHandler<SyntheticEvent<HTMLInputElement>> = (event) => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
 		onChangeValue?.(event.currentTarget.value);
 	};
 
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx
index 8db88c13f514e..2c096cbc4dee7 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx
@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, TextAreaInput, TextInput } from '@rocket.chat/fuselage';
-import type { EventHandler, SyntheticEvent } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -27,7 +27,7 @@ function StringSettingInput({
 	onChangeValue,
 	onResetButtonClick,
 }: StringSettingInputProps) {
-	const handleChange: EventHandler<SyntheticEvent<HTMLInputElement>> = (event) => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
 		onChangeValue?.(event.currentTarget.value);
 	};
 
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx
index 8ec08a18f22a6..7a65556a4b7b7 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx
@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, InputBox, Select } from '@rocket.chat/fuselage';
-import type { FormEventHandler, Key } from 'react';
+import type { ChangeEventHandler, Key } from 'react';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -55,7 +55,7 @@ function TimespanSettingInput({
 	const [timeUnit, setTimeUnit] = useState<TIMEUNIT>(getHighestTimeUnit(Number(value)));
 	const [internalValue, setInternalValue] = useState<number>(msToTimeUnit(timeUnit, Number(value)));
 
-	const handleChange: FormEventHandler<HTMLInputElement> = (event) => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
 		const newValue = sanitizeInputValue(Number(event.currentTarget.value));
 
 		onChangeValue?.(timeUnitToMs(timeUnit, newValue));
diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx
index 10947f5758f28..1941bbb7e3aef 100644
--- a/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx
@@ -4,7 +4,7 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useToastMessageDispatch, useSettingsDispatch, useSettings } from '@rocket.chat/ui-contexts';
-import type { ReactNode, FormEvent, MouseEvent } from 'react';
+import type { ReactNode, MouseEvent, FormEvent } from 'react';
 import { useMemo, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx
index e862afaf03ecb..c2253e5564104 100644
--- a/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx
@@ -3,7 +3,7 @@ import { Button, Box, TextInput, Field, FieldLabel, FieldRow } from '@rocket.cha
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { GenericModal } from '@rocket.chat/ui-client';
 import { useSetModal, useToastMessageDispatch, useSetting, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -53,7 +53,7 @@ function LDAPGroupPage({ _id, i18nLabel, onClickBack, ...group }: LDAPGroupPageP
 		try {
 			await testConnection();
 			let username = '';
-			const handleChangeUsername = (event: FormEvent<HTMLInputElement>): void => {
+			const handleChangeUsername = (event: ChangeEvent<HTMLInputElement>): void => {
 				username = event.currentTarget.value;
 			};
 
@@ -71,7 +71,7 @@ function LDAPGroupPage({ _id, i18nLabel, onClickBack, ...group }: LDAPGroupPageP
 					wrapperFunction={(props) => (
 						<Box
 							is='form'
-							onSubmit={(e: FormEvent) => {
+							onSubmit={(e) => {
 								e.preventDefault();
 								confirmSearch();
 							}}
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
index 42e007de6f508..e43bc1a6c73d4 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
@@ -3,7 +3,7 @@ import { Box, Icon, Margins, TextInput } from '@rocket.chat/fuselage';
 import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import type { OptionProp } from '@rocket.chat/ui-client';
 import { MultiSelectCustom } from '@rocket.chat/ui-client';
-import type { Dispatch, FormEvent, SetStateAction } from 'react';
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,7 +21,7 @@ const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps
 	const [text, setText] = useState('');
 
 	const handleSearchTextChange = useCallback(
-		(event: FormEvent<HTMLInputElement>) => {
+		(event: ChangeEvent<HTMLInputElement>) => {
 			setText(event.currentTarget.value);
 			setUsersFilters({ text: event.currentTarget.value, roles: selectedRoles });
 		},
@@ -66,7 +66,7 @@ const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps
 		<Box
 			mb={16}
 			is='form'
-			onSubmit={(event: FormEvent<HTMLFormElement>) => {
+			onSubmit={(event) => {
 				event.preventDefault();
 			}}
 			display='flex'
diff --git a/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx b/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx
index da65923a97234..80a3cc33343e0 100644
--- a/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx
+++ b/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx
@@ -2,7 +2,7 @@ import { Box, InputBox, Margins } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { GenericMenu } from '@rocket.chat/ui-client';
 import { startOfDay, endOfDay, startOfWeek, endOfWeek, startOfMonth, endOfMonth, subDays, subWeeks, subMonths, parseISO } from 'date-fns';
-import type { ComponentProps, SetStateAction, FormEvent } from 'react';
+import type { ComponentProps, SetStateAction, ChangeEvent } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -130,11 +130,11 @@ const DateRangePicker = ({ value, onChange, ...props }: DateRangePickerProps) =>
 		onChange?.(newRange);
 	});
 
-	const handleChangeStart = useEffectEvent(({ currentTarget }: FormEvent<HTMLInputElement>) => {
+	const handleChangeStart = useEffectEvent(({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
 		dispatch({ newStart: currentTarget.value });
 	});
 
-	const handleChangeEnd = useEffectEvent(({ currentTarget }: FormEvent<HTMLInputElement>) => {
+	const handleChangeEnd = useEffectEvent(({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
 		dispatch({ newEnd: currentTarget.value });
 	});
 
diff --git a/apps/meteor/client/views/mediaCallHistory/CallHistoryPageFilters.tsx b/apps/meteor/client/views/mediaCallHistory/CallHistoryPageFilters.tsx
index 56c4942227169..e1f333c571db0 100644
--- a/apps/meteor/client/views/mediaCallHistory/CallHistoryPageFilters.tsx
+++ b/apps/meteor/client/views/mediaCallHistory/CallHistoryPageFilters.tsx
@@ -2,7 +2,7 @@ import { Box, Icon, TextInput, Select } from '@rocket.chat/fuselage';
 import type { OptionProp } from '@rocket.chat/ui-client';
 import { MultiSelectCustom } from '@rocket.chat/ui-client';
 import { useCallback, useMemo, useState } from 'react';
-import type { FormEvent, Key } from 'react';
+import type { ChangeEvent, Key, FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type StatesFilter = Array<'ended' | 'transferred' | 'not-answered' | 'failed'>;
@@ -79,7 +79,7 @@ const CallHistoryPageFilters = ({ onChangeText, onChangeType, onChangeStates, se
 	return (
 		<Box
 			is='form'
-			onSubmit={useCallback((e: FormEvent) => e.preventDefault(), [])}
+			onSubmit={useCallback((e: FormEvent<HTMLFormElement>) => e.preventDefault(), [])}
 			mb='x8'
 			display='flex'
 			flexWrap='wrap'
@@ -92,7 +92,7 @@ const CallHistoryPageFilters = ({ onChangeText, onChangeType, onChangeStates, se
 					alignItems='center'
 					placeholder={t('Search_calls')}
 					addon={<Icon name='magnifier' size='x20' />}
-					onChange={(e: FormEvent<HTMLInputElement>) => onChangeText(e.currentTarget.value)}
+					onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeText(e.currentTarget.value)}
 					value={searchText}
 				/>
 			</Box>
diff --git a/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx b/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx
index 746225ee2f44a..e8307eae49b3a 100644
--- a/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx
+++ b/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx
@@ -2,7 +2,7 @@ import { Box, InputBox, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselag
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { GenericMenu } from '@rocket.chat/ui-client';
 import { subDays, subMonths, startOfMonth, endOfMonth, format } from 'date-fns';
-import type { ComponentProps, FormEvent } from 'react';
+import type { ComponentProps, ChangeEvent } from 'react';
 import { useState, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -39,7 +39,7 @@ const DateRangePicker = ({ onChange = () => undefined, ...props }: DateRangePick
 
 	const { start, end } = range;
 
-	const handleStart = useEffectEvent(({ currentTarget }: FormEvent<HTMLInputElement>) => {
+	const handleStart = useEffectEvent(({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
 		const rangeObj = {
 			start: currentTarget.value,
 			end: range.end,
@@ -48,7 +48,7 @@ const DateRangePicker = ({ onChange = () => undefined, ...props }: DateRangePick
 		onChange(rangeObj);
 	});
 
-	const handleEnd = useEffectEvent(({ currentTarget }: FormEvent<HTMLInputElement>) => {
+	const handleEnd = useEffectEvent(({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
 		const rangeObj = {
 			end: currentTarget.value,
 			start: range.start,
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx
index 516a70ee0143d..041952b2e5584 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx
@@ -11,7 +11,7 @@ import {
 	ContextualbarDialog,
 } from '@rocket.chat/ui-client';
 import { useRoomToolbox } from '@rocket.chat/ui-contexts';
-import type { Dispatch, FormEventHandler, MouseEvent, SetStateAction } from 'react';
+import type { Dispatch, ChangeEventHandler, MouseEvent, SetStateAction } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Virtuoso } from 'react-virtuoso';
@@ -27,7 +27,7 @@ type CannedResponseListProps = {
 	onClose: () => void;
 	options: [string, string][];
 	text: string;
-	setText: FormEventHandler<HTMLInputElement>;
+	setText: ChangeEventHandler<HTMLInputElement>;
 	type: string;
 	setType: Dispatch<SetStateAction<string>>;
 	isRoomOverMacLimit: boolean;
diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx
index 36815bde66c91..f8854c6575791 100644
--- a/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx
@@ -1,5 +1,5 @@
 import { Button, Chip, FieldRow, TextInput } from '@rocket.chat/fuselage';
-import type { ComponentProps, FormEvent } from 'react';
+import type { ComponentProps, ChangeEvent } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -33,7 +33,7 @@ const DepartmentTags = ({ error, value: tags, onChange, ...props }: DepartmentTa
 					error={error}
 					placeholder={t('Enter_a_tag')}
 					value={tagText}
-					onChange={(e: FormEvent<HTMLInputElement>) => setTagText(e.currentTarget.value)}
+					onChange={(e: ChangeEvent<HTMLInputElement>) => setTagText(e.currentTarget.value)}
 					{...props}
 				/>
 				<Button disabled={Boolean(!tagText.trim()) || tags.includes(tagText)} mis={8} title={t('Add')} onClick={handleAddTag}>
diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/RemoveContactModal.tsx b/apps/meteor/client/views/omnichannel/directory/contacts/RemoveContactModal.tsx
index 9a1e9c1c01ca9..8b01aa8bf9dd5 100644
--- a/apps/meteor/client/views/omnichannel/directory/contacts/RemoveContactModal.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/contacts/RemoveContactModal.tsx
@@ -3,7 +3,7 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { GenericModal } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, FormEvent } from 'react';
 import { useState, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -23,7 +23,7 @@ const RemoveContactModal = ({ _id, name, channelsCount, onClose }: RemoveContact
 	const dispatchToast = useToastMessageDispatch();
 	const contactDeleteModalId = useId();
 
-	const handleSubmit = useEffectEvent((event: ChangeEvent<HTMLFormElement>): void => {
+	const handleSubmit = useEffectEvent((event: FormEvent<HTMLFormElement>): void => {
 		event.preventDefault();
 		removeContactMutation.mutate();
 	});
diff --git a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx
index 2c4bb57ca5026..bc45331f5652c 100644
--- a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx
+++ b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx
@@ -17,7 +17,7 @@ type QuickActionOptionsProps = {
 
 const QuickActionOptions = ({ options, room, action, icon, ...props }: QuickActionOptionsProps) => {
 	const { t } = useTranslation();
-	const reference = useRef(null);
+	const reference = useRef<HTMLButtonElement>(null);
 	const target = useRef(null);
 	const { isVisible, toggle } = useDropdownVisibility({ reference, target });
 
diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
index 05305c9a3f6a5..def27957d8700 100644
--- a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
+++ b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
@@ -125,7 +125,7 @@ const MessageBox = ({
 		throw new Error('Chat context not found');
 	}
 
-	const textareaRef = useRef(null);
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const messageComposerRef = useRef<HTMLElement>(null);
 
 	const subscription = useRoomSubscription();
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
index f1c77cdce6b47..e80ffe39ef535 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
@@ -15,7 +15,7 @@ import {
 	ContextualbarDialog,
 } from '@rocket.chat/ui-client';
 import { useSetting } from '@rocket.chat/ui-contexts';
-import type { FormEventHandler, ComponentProps, MouseEvent, ElementType } from 'react';
+import type { ChangeEventHandler, ComponentProps, MouseEvent, ElementType } from 'react';
 import { useId, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GroupedVirtuoso } from 'react-virtuoso';
@@ -34,7 +34,7 @@ type RoomMembersProps = {
 	isSuccess: boolean;
 	text: string;
 	type: string;
-	setText: FormEventHandler<HTMLInputElement>;
+	setText: ChangeEventHandler<HTMLInputElement>;
 	setType: (type: 'online' | 'all') => void;
 	members: RoomMember[];
 	total: number;
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx
index 6b9ad90565726..50c983828c43d 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx
@@ -13,7 +13,7 @@ import {
 	ContextualbarDialog,
 } from '@rocket.chat/ui-client';
 import { useTranslation, useUserId, useRoomToolbox } from '@rocket.chat/ui-contexts';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useMemo, useState, useCallback, useId } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
@@ -46,7 +46,7 @@ const ThreadList = () => {
 	const [searchText, setSearchText] = useState('');
 
 	const handleSearchTextChange = useCallback(
-		(event: FormEvent<HTMLInputElement>) => {
+		(event: ChangeEvent<HTMLInputElement>) => {
 			setSearchText(event.currentTarget.value);
 		},
 		[setSearchText],
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
index 57448c8ef5516..0b64b4477c261 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
@@ -1,6 +1,6 @@
 import { Box, CheckBox, Icon, Option, OptionIcon, SearchInput, Tile } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { Fragment, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -25,14 +25,14 @@ const MultiSelectCustomList = ({
 	searchBarText,
 }: {
 	options: OptionProp[];
-	onSelected: (item: OptionProp, e?: FormEvent<HTMLElement>) => void;
+	onSelected: (item: OptionProp, e?: ChangeEvent<HTMLElement>) => void;
 	searchBarText?: string;
 }) => {
 	const { t } = useTranslation();
 
 	const [text, setText] = useState('');
 
-	const handleChange = useCallback((event: FormEvent<HTMLInputElement>) => setText(event.currentTarget.value), []);
+	const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => setText(event.currentTarget.value), []);
 
 	const filteredOptions = useFilteredOptions(text, options);
 
diff --git a/packages/ui-voip/src/providers/useMediaSession.ts b/packages/ui-voip/src/providers/useMediaSession.ts
index 893bbd06ca5d0..3798c874b8193 100644
--- a/packages/ui-voip/src/providers/useMediaSession.ts
+++ b/packages/ui-voip/src/providers/useMediaSession.ts
@@ -107,7 +107,7 @@ export type MediaSessionStateWithWidgetControls = {
 };
 
 export const useMediaSession = (instance?: MediaSignalingSession): MediaSessionStateWithWidgetControls => {
-	const [mediaSession, dispatch] = useReducer<typeof reducer>(reducer, defaultSessionInfo);
+	const [mediaSession, dispatch] = useReducer(reducer, defaultSessionInfo);
 
 	const getAvatarUrl = useUserAvatarPath();
 
diff --git a/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx b/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx
index a42ec739e3465..d49ef679fbe88 100644
--- a/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx
+++ b/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx
@@ -1,5 +1,5 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
 
 import type { HistoryActionCallbacks } from './CallHistoryActions';
 import CallHistoryActions from './CallHistoryActions';
@@ -37,8 +37,8 @@ const getArgs = (index: number) => {
 	return Object.fromEntries(actionList.slice(0, index).map((action) => [action, noop])) as HistoryActionCallbacks;
 };
 
-const getDecorator = (state: State) => {
-	return (Story: StoryFn) => (
+const getDecorator = (state: State): Decorator => {
+	return (Story) => (
 		<MockedMediaCallProvider state={state}>
 			<Story />
 		</MockedMediaCallProvider>