diff --git a/apps/demos/Demos/Autocomplete/Overview/React/App.tsx b/apps/demos/Demos/Autocomplete/Overview/React/App.tsx
index 2dd9efadbd36..b22f0796a981 100644
--- a/apps/demos/Demos/Autocomplete/Overview/React/App.tsx
+++ b/apps/demos/Demos/Autocomplete/Overview/React/App.tsx
@@ -23,9 +23,11 @@ const clientsStore = new CustomStore({
   useDefaultSearch: true,
   load: (loadOptions: LoadOptions) => {
     let params = '?';
-    ['skip', 'take', 'filter'].forEach((option: string): void => {
+    type LoadOptionKey = keyof LoadOptions;
+    const loadOptionKeys: LoadOptionKey[] = ['skip', 'take', 'filter'];
+    loadOptionKeys.forEach((option: LoadOptionKey): void => {
       if (option in loadOptions && isNotEmpty(loadOptions[option])) {
-        params += `${option}=${JSON.stringify(loadOptions[option])}&`;
+        params += `${option as string}=${JSON.stringify(loadOptions[option])}&`;
       }
     });
     params = params.slice(0, -1);
diff --git a/apps/demos/Demos/Autocomplete/Overview/ReactJs/App.js b/apps/demos/Demos/Autocomplete/Overview/ReactJs/App.js
index 76e965ca5013..4e4e84d7c013 100644
--- a/apps/demos/Demos/Autocomplete/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Autocomplete/Overview/ReactJs/App.js
@@ -19,7 +19,8 @@ const clientsStore = new CustomStore({
   useDefaultSearch: true,
   load: (loadOptions) => {
     let params = '?';
-    ['skip', 'take', 'filter'].forEach((option) => {
+    const loadOptionKeys = ['skip', 'take', 'filter'];
+    loadOptionKeys.forEach((option) => {
       if (option in loadOptions && isNotEmpty(loadOptions[option])) {
         params += `${option}=${JSON.stringify(loadOptions[option])}&`;
       }
diff --git a/apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx b/apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx
index d42118b938e5..056e2193036b 100644
--- a/apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx
+++ b/apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx
@@ -66,7 +66,7 @@ export default function App() {
           min={minDateValue}
           max={maxDateValue}
           defaultValue={initialValue}
-          disabledDates={weekendDisabled ? isDateDisabled : null}
+          disabledDates={weekendDisabled ? isDateDisabled : undefined}
         />
       </div>
       <div className="options">
diff --git a/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js b/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js
index cc003867aaea..f1510b613400 100644
--- a/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js
+++ b/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js
@@ -65,7 +65,7 @@ export default function App() {
           min={minDateValue}
           max={maxDateValue}
           defaultValue={initialValue}
-          disabledDates={weekendDisabled ? isDateDisabled : null}
+          disabledDates={weekendDisabled ? isDateDisabled : undefined}
         />
       </div>
       <div className="options">
diff --git a/apps/demos/Demos/Calendar/Overview/React/App.tsx b/apps/demos/Demos/Calendar/Overview/React/App.tsx
index 5a9345ec219d..1d3be3942546 100644
--- a/apps/demos/Demos/Calendar/Overview/React/App.tsx
+++ b/apps/demos/Demos/Calendar/Overview/React/App.tsx
@@ -27,7 +27,7 @@ const ruleLabel = { 'aria-label': 'Week Number Rule' };
 
 export default function App() {
   const [zoomLevel, setZoomLevel] = useState<CalendarTypes.CalendarZoomLevel>('month');
-  const [currentValue, setCurrentValue] = useState<Date>(new Date());
+  const [currentValue, setCurrentValue] = useState<Date | undefined>(new Date());
   const [useCellTemplate, setUseCellTemplate] = useState<boolean | null>(null);
   const [disabled, setDisabled] = useState<boolean>(false);
   const [showWeekNumbers, setShowWeekNumbers] = useState<boolean>(false);
@@ -104,7 +104,7 @@ export default function App() {
           showWeekNumbers={showWeekNumbers}
           disabled={disabled}
           zoomLevel={zoomLevel}
-          cellComponent={useCellTemplate ? CustomCell : null}
+          cellComponent={useCellTemplate ? CustomCell : undefined}
         />
       </div>
       <div className="options">
diff --git a/apps/demos/Demos/Calendar/Overview/ReactJs/App.js b/apps/demos/Demos/Calendar/Overview/ReactJs/App.js
index 9a4c6746d585..bb219dc4a341 100644
--- a/apps/demos/Demos/Calendar/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Calendar/Overview/ReactJs/App.js
@@ -75,7 +75,7 @@ export default function App() {
           showWeekNumbers={showWeekNumbers}
           disabled={disabled}
           zoomLevel={zoomLevel}
-          cellComponent={useCellTemplate ? CustomCell : null}
+          cellComponent={useCellTemplate ? CustomCell : undefined}
         />
       </div>
       <div className="options">
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/App.tsx b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/App.tsx
index 218e72ccd1bd..ef41121746d8 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/App.tsx
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/App.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import Chat, { type ChatTypes } from 'devextreme-react/chat';
+import Chat from 'devextreme-react/chat';
+import type { ChatTypes } from 'devextreme-react/chat';
 import { loadMessages } from 'devextreme-react/common/core/localization';
 import {
   user,
@@ -42,11 +43,11 @@ export default function App() {
     insertMessage({ id: Date.now(), ...message });
 
     if (!alerts.length) {
-      (event.target as HTMLElement).blur();
+      (event?.target as HTMLElement).blur();
 
       await processAIRequest(message);
 
-      (event.target as HTMLElement).focus();
+      (event?.target as HTMLElement).focus();
     }
   }, [insertMessage, alerts.length, processAIRequest]);
 
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
index c26f59d4c269..e6f4ff4d0261 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
@@ -1,10 +1,13 @@
 import { useCallback, useState } from 'react';
 import { AzureOpenAI, OpenAI } from 'openai';
-import { type ChatTypes } from 'devextreme-react/chat';
+import type { ChatTypes } from 'devextreme-react/chat';
 import { CustomStore, DataSource } from 'devextreme-react/common/data';
+import type { AIResponse } from 'devextreme/common/ai-integration';
 import {
-  ALERT_TIMEOUT, assistant,
-  AzureOpenAIConfig, REGENERATION_TEXT,
+  ALERT_TIMEOUT,
+  assistant,
+  AzureOpenAIConfig,
+  REGENERATION_TEXT,
 } from './data.ts';
 
 type Message = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionAssistantMessageParam) & {
@@ -14,11 +17,11 @@ type Message = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionAss
 const chatService = new AzureOpenAI(AzureOpenAIConfig);
 
 const wait = (delay: number): Promise<void> =>
-  new Promise((resolve) => {
+  new Promise((resolve): void => {
     setTimeout(resolve, delay);
   });
 
-export async function getAIResponse(messages: Message[], delay?: number): Promise<string> {
+export async function getAIResponse(messages: Message[], delay?: number): Promise<AIResponse> {
   const params = {
     messages,
     model: AzureOpenAIConfig.deployment,
@@ -33,7 +36,7 @@ export async function getAIResponse(messages: Message[], delay?: number): Promis
     await wait(delay);
   }
 
-  return data.choices[0].message?.content;
+  return data.choices[0].message?.content ?? '';
 }
 
 const store: ChatTypes.Message[] = [];
@@ -59,7 +62,7 @@ export const dataSource = new DataSource({
 });
 
 const dataItemToMessage = (item: ChatTypes.Message): Message => ({
-  role: item.author.id as Message['role'],
+  role: item.author?.id as Message['role'],
   content: item.text,
 });
 
@@ -116,9 +119,11 @@ export const useApi = () => {
     try {
       const aiResponse = await getAIResponse(messageHistory.slice(0, -1));
 
-      updateLastMessageContent(aiResponse);
+      if (typeof aiResponse === 'string') {
+        updateLastMessageContent(aiResponse);
+      }
     } catch {
-      updateLastMessageContent(messageHistory.at(-1)?.content);
+      updateLastMessageContent(messageHistory.at(-1)?.content as string);
       alertLimitReached();
     }
   }, [alertLimitReached, updateLastMessageContent]);
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/App.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/App.js
index d5036ab9fe92..325bd4464f75 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/App.js
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/App.js
@@ -32,9 +32,9 @@ export default function App() {
     async ({ message, event }) => {
       insertMessage({ id: Date.now(), ...message });
       if (!alerts.length) {
-        event.target.blur();
+        (event?.target).blur();
         await processAIRequest(message);
-        event.target.focus();
+        (event?.target).focus();
       }
     },
     [insertMessage, alerts.length, processAIRequest],
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js
index c27de6f0451e..b8fdc6bedf9f 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js
@@ -22,7 +22,7 @@ export async function getAIResponse(messages, delay) {
   if (delay) {
     await wait(delay);
   }
-  return data.choices[0].message?.content;
+  return data.choices[0].message?.content ?? '';
 }
 const store = [];
 const customStore = new CustomStore({
@@ -46,7 +46,7 @@ export const dataSource = new DataSource({
   paginate: false,
 });
 const dataItemToMessage = (item) => ({
-  role: item.author.id,
+  role: item.author?.id,
   content: item.text,
 });
 const getMessageHistory = () => [...dataSource.items()].map(dataItemToMessage);
@@ -97,7 +97,9 @@ export const useApi = () => {
     updateLastMessageContent(REGENERATION_TEXT);
     try {
       const aiResponse = await getAIResponse(messageHistory.slice(0, -1));
-      updateLastMessageContent(aiResponse);
+      if (typeof aiResponse === 'string') {
+        updateLastMessageContent(aiResponse);
+      }
     } catch {
       updateLastMessageContent(messageHistory.at(-1)?.content);
       alertLimitReached();
diff --git a/apps/demos/Demos/Chat/Customization/React/App.tsx b/apps/demos/Demos/Chat/Customization/React/App.tsx
index b6c6f324be79..da1f7ab4fe0f 100644
--- a/apps/demos/Demos/Chat/Customization/React/App.tsx
+++ b/apps/demos/Demos/Chat/Customization/React/App.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useCallback } from 'react';
-import Chat, { type ChatTypes } from 'devextreme-react/chat';
+import Chat from 'devextreme-react/chat';
+import type { ChatTypes } from 'devextreme-react/chat';
 import SelectBox from 'devextreme-react/select-box';
 import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import type { Format } from 'devextreme-react/common/core/localization';
 
 import {
@@ -13,15 +15,17 @@ import {
   dayHeaderLabel,
 } from './data.ts';
 
+type CheckBoxValue = CheckBoxTypes.Properties['value'];
+
 export default function App() {
   const [messages, setMessages] = useState<ChatTypes.Message[]>(initialMessages);
-  const [showAvatar, setShowAvatar] = useState<boolean>(true);
-  const [showUsername, setShowUsername] = useState<boolean>(true);
-  const [showDayHeaders, setDayHeaders] = useState<boolean>(true);
+  const [showAvatar, setShowAvatar] = useState<CheckBoxValue>(true);
+  const [showUsername, setShowUsername] = useState<CheckBoxValue>(true);
+  const [showDayHeaders, setDayHeaders] = useState<CheckBoxValue>(true);
   const [dayHeaderFormat, setDayHeaderFormat] = useState<Format>(headerFormats[0]);
-  const [showMessageTimestamp, setMessageTimestamp] = useState<boolean>(true);
+  const [showMessageTimestamp, setMessageTimestamp] = useState<CheckBoxValue>(true);
   const [messageTimestampFormat, setMessageTimestampFormat] = useState<Format>(messageTimestamps[0]);
-  const [isDisabled, setDisabled] = useState<boolean>(false);
+  const [isDisabled, setDisabled] = useState<CheckBoxTypes.Properties['value']>(false);
 
   const onMessageEntered = useCallback(({ message }: ChatTypes.MessageEnteredEvent): void => {
     setMessages((prevMessages) => [...prevMessages, message]);
@@ -34,11 +38,11 @@ export default function App() {
           height={710}
           items={messages}
           user={currentUser}
-          disabled={isDisabled}
-          showAvatar={showAvatar}
-          showUserName={showUsername}
-          showDayHeaders={showDayHeaders}
-          showMessageTimestamp={showMessageTimestamp}
+          disabled={!!isDisabled}
+          showAvatar={!!showAvatar}
+          showUserName={!!showUsername}
+          showDayHeaders={!!showDayHeaders}
+          showMessageTimestamp={!!showMessageTimestamp}
           dayHeaderFormat={dayHeaderFormat}
           messageTimestampFormat={messageTimestampFormat}
           onMessageEntered={onMessageEntered}
diff --git a/apps/demos/Demos/Chat/Customization/ReactJs/App.js b/apps/demos/Demos/Chat/Customization/ReactJs/App.js
index 87449b3b249b..a20f7bb6d071 100644
--- a/apps/demos/Demos/Chat/Customization/ReactJs/App.js
+++ b/apps/demos/Demos/Chat/Customization/ReactJs/App.js
@@ -30,11 +30,11 @@ export default function App() {
           height={710}
           items={messages}
           user={currentUser}
-          disabled={isDisabled}
-          showAvatar={showAvatar}
-          showUserName={showUsername}
-          showDayHeaders={showDayHeaders}
-          showMessageTimestamp={showMessageTimestamp}
+          disabled={!!isDisabled}
+          showAvatar={!!showAvatar}
+          showUserName={!!showUsername}
+          showDayHeaders={!!showDayHeaders}
+          showMessageTimestamp={!!showMessageTimestamp}
           dayHeaderFormat={dayHeaderFormat}
           messageTimestampFormat={messageTimestampFormat}
           onMessageEntered={onMessageEntered}
diff --git a/apps/demos/Demos/Chat/MessageEditing/React/App.tsx b/apps/demos/Demos/Chat/MessageEditing/React/App.tsx
index dedae614a3aa..b7e1e9ae9779 100644
--- a/apps/demos/Demos/Chat/MessageEditing/React/App.tsx
+++ b/apps/demos/Demos/Chat/MessageEditing/React/App.tsx
@@ -17,15 +17,17 @@ import {
 const editingStrategy = {
   enabled: true,
   disabled: false,
-  custom: ({ component, message }: { component: ReturnType<ChatRef['instance']>, message: ChatTypes.Message }): boolean => {
-    const { items, user } = component.option();
+  custom: ({ component, message }: { component?: ReturnType<ChatRef['instance']>, message?: ChatTypes.Message }): boolean => {
+    const { items, user } = component?.option() ?? {};
     const userId = user?.id;
 
     const lastNotDeletedMessage = items?.findLast((item: ChatTypes.Message): boolean => item.author?.id === userId && !item.isDeleted);
 
-    return message.id === lastNotDeletedMessage?.id;
+    return message?.id === lastNotDeletedMessage?.id;
   },
-};
+} as const;
+
+type EditingStrategyKey = keyof typeof editingStrategy;
 
 const store: ChatTypes.Message[] = [...initialMessages];
 
@@ -85,12 +87,12 @@ export default function App() {
   }, []);
 
   const handleAllowUpdatingChange = useCallback((e: SelectBoxTypes.ValueChangedEvent): void => {
-    const strategy = editingStrategy[e.value];
+    const strategy = editingStrategy[e.value as EditingStrategyKey];
     setAllowUpdating(() => strategy);
   }, []);
 
   const handleAllowDeletingChange = useCallback((e: SelectBoxTypes.ValueChangedEvent): void => {
-    const strategy = editingStrategy[e.value];
+    const strategy = editingStrategy[e.value as EditingStrategyKey];
     setAllowDeleting(() => strategy);
   }, []);
 
diff --git a/apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js b/apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js
index 111acf392f1b..7a4ff7c353b3 100644
--- a/apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js
+++ b/apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js
@@ -15,12 +15,12 @@ const editingStrategy = {
   enabled: true,
   disabled: false,
   custom: ({ component, message }) => {
-    const { items, user } = component.option();
+    const { items, user } = component?.option() ?? {};
     const userId = user?.id;
     const lastNotDeletedMessage = items?.findLast(
       (item) => item.author?.id === userId && !item.isDeleted,
     );
-    return message.id === lastNotDeletedMessage?.id;
+    return message?.id === lastNotDeletedMessage?.id;
   },
 };
 const store = [...initialMessages];
diff --git a/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/App.tsx b/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/App.tsx
index fd53c233ab28..0993ba9a1100 100644
--- a/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/App.tsx
+++ b/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/App.tsx
@@ -37,7 +37,7 @@ function App() {
 
   return (
     <div>
-      <div className={rtlEnabled ? 'dx-rtl' : null}>
+      <div className={rtlEnabled ? 'dx-rtl' : undefined}>
         <div className="options">
           <div className="caption">Options</div>
           <div className="dx-fieldset">
diff --git a/apps/demos/Demos/Common/EditorsRightToLeftSupport/ReactJs/App.js b/apps/demos/Demos/Common/EditorsRightToLeftSupport/ReactJs/App.js
index 8c8a97ff22d9..7e42ff06bec6 100644
--- a/apps/demos/Demos/Common/EditorsRightToLeftSupport/ReactJs/App.js
+++ b/apps/demos/Demos/Common/EditorsRightToLeftSupport/ReactJs/App.js
@@ -32,7 +32,7 @@ function App() {
   }, []);
   return (
     <div>
-      <div className={rtlEnabled ? 'dx-rtl' : null}>
+      <div className={rtlEnabled ? 'dx-rtl' : undefined}>
         <div className="options">
           <div className="caption">Options</div>
           <div className="dx-fieldset">
diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/App.tsx b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/App.tsx
index bab79a36c7bc..c712af6dd149 100644
--- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/App.tsx
+++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/App.tsx
@@ -28,14 +28,16 @@ export default function App() {
   const changeFavoriteState = useCallback(() => {
     const updatedHouses = [...houses];
     const updatedCurrentHouse = updatedHouses.find((house: HouseType): boolean => house === currentHouse);
-    updatedCurrentHouse.Favorite = !updatedCurrentHouse.Favorite;
+    if (updatedCurrentHouse) {
+      updatedCurrentHouse.Favorite = !updatedCurrentHouse.Favorite;
+    }
     setHouses(updatedHouses);
 
     notify({
-      message: `This item has been ${updatedCurrentHouse.Favorite ? 'added to' : 'removed from'} the Favorites list!`,
+      message: `This item has been ${updatedCurrentHouse?.Favorite ? 'added to' : 'removed from'} the Favorites list!`,
       width: 450,
     },
-    updatedCurrentHouse.Favorite ? 'success' : 'error',
+    updatedCurrentHouse?.Favorite ? 'success' : 'error',
     2000);
   }, [houses, currentHouse]);
 
diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/App.js b/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/App.js
index 2047bd8c506b..ad62a1fa5318 100644
--- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/App.js
+++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/App.js
@@ -23,16 +23,18 @@ export default function App() {
   const changeFavoriteState = useCallback(() => {
     const updatedHouses = [...houses];
     const updatedCurrentHouse = updatedHouses.find((house) => house === currentHouse);
-    updatedCurrentHouse.Favorite = !updatedCurrentHouse.Favorite;
+    if (updatedCurrentHouse) {
+      updatedCurrentHouse.Favorite = !updatedCurrentHouse.Favorite;
+    }
     setHouses(updatedHouses);
     notify(
       {
         message: `This item has been ${
-          updatedCurrentHouse.Favorite ? 'added to' : 'removed from'
+          updatedCurrentHouse?.Favorite ? 'added to' : 'removed from'
         } the Favorites list!`,
         width: 450,
       },
-      updatedCurrentHouse.Favorite ? 'success' : 'error',
+      updatedCurrentHouse?.Favorite ? 'success' : 'error',
       2000,
     );
   }, [houses, currentHouse]);
diff --git a/apps/demos/Demos/DropDownBox/MultipleSelection/React/App.tsx b/apps/demos/Demos/DropDownBox/MultipleSelection/React/App.tsx
index 21ecddeba9a9..af407d4c4eb2 100644
--- a/apps/demos/Demos/DropDownBox/MultipleSelection/React/App.tsx
+++ b/apps/demos/Demos/DropDownBox/MultipleSelection/React/App.tsx
@@ -43,7 +43,7 @@ function App() {
           treeView.unselectAll();
         } else {
           const values = e.value || treeBoxValue;
-          values?.forEach((value): void => {
+          values?.forEach((value: string): void => {
             treeView.selectItem(value);
           });
         }
diff --git a/apps/demos/Demos/DropDownButton/Overview/React/App.tsx b/apps/demos/Demos/DropDownButton/Overview/React/App.tsx
index 6f3e1cf92f15..ae516de18256 100644
--- a/apps/demos/Demos/DropDownButton/Overview/React/App.tsx
+++ b/apps/demos/Demos/DropDownButton/Overview/React/App.tsx
@@ -4,7 +4,6 @@ import type { DropDownButtonTypes, DropDownButtonRef } from 'devextreme-react/dr
 import Toolbar from 'devextreme-react/toolbar';
 import type { ToolbarTypes } from 'devextreme-react/toolbar';
 import { Template } from 'devextreme-react/core/template';
-import type { ButtonTypes } from 'devextreme-react/button';
 import notify from 'devextreme/ui/notify';
 import {
   colors,
@@ -35,18 +34,18 @@ const App = () => {
   type ColorPicker = ReturnType<DropDownButtonRef['instance']>;
   const [colorPicker, setColorPicker] = useState<ColorPicker | undefined>(undefined);
 
-  const onButtonClick = useCallback((e: ButtonTypes.ClickEvent): void => {
-    notify(`Go to ${e.element.querySelector('.button-title').textContent}'s profile`, 'success', 600);
+  const onButtonClick = useCallback((e: DropDownButtonTypes.ButtonClickEvent): void => {
+    notify(`Go to ${e.element.querySelector('.button-title')?.textContent}'s profile`, 'success', 600);
   }, []);
 
   const onItemClick = useCallback((e: DropDownButtonTypes.ItemClickEvent): void => {
     notify(e.itemData.name || e.itemData, 'success', 600);
   }, []);
 
-  const onColorClick = useCallback((selectedColor: string): void => {
+  const onColorClick = useCallback((selectedColor: string | null): void => {
     setColor(selectedColor);
     const squareIcon = colorPicker?.element().getElementsByClassName('dx-icon-square')[0] as HTMLElement;
-    squareIcon.style.color = selectedColor;
+    squareIcon.style.color = selectedColor ?? '';
     colorPicker?.close();
   }, [colorPicker]);
 
diff --git a/apps/demos/Demos/DropDownButton/Overview/React/ColorIcon.tsx b/apps/demos/Demos/DropDownButton/Overview/React/ColorIcon.tsx
index 1f94dc6b3ee3..64428f8a9138 100644
--- a/apps/demos/Demos/DropDownButton/Overview/React/ColorIcon.tsx
+++ b/apps/demos/Demos/DropDownButton/Overview/React/ColorIcon.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 
 interface ColorIconProps {
-  color: string;
-  onClick: (color: string) => void;
+  color: string | null;
+  onClick: (color: string | null) => void;
 }
 
 const ColorIcon = ({ color, onClick }: ColorIconProps) => (
   <i
     onClick={() => onClick(color)}
     className="color dx-icon dx-icon-square"
-    style={{ color }}
+    style={{ color: color ?? undefined }}
   />
 );
 
diff --git a/apps/demos/Demos/DropDownButton/Overview/ReactJs/App.js b/apps/demos/Demos/DropDownButton/Overview/ReactJs/App.js
index 48469d8d386f..9d75d318b8b7 100644
--- a/apps/demos/Demos/DropDownButton/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/DropDownButton/Overview/ReactJs/App.js
@@ -20,7 +20,7 @@ const App = () => {
   const [colorPicker, setColorPicker] = useState(undefined);
   const onButtonClick = useCallback((e) => {
     notify(
-      `Go to ${e.element.querySelector('.button-title').textContent}'s profile`,
+      `Go to ${e.element.querySelector('.button-title')?.textContent}'s profile`,
       'success',
       600,
     );
@@ -32,7 +32,7 @@ const App = () => {
     (selectedColor) => {
       setColor(selectedColor);
       const squareIcon = colorPicker?.element().getElementsByClassName('dx-icon-square')[0];
-      squareIcon.style.color = selectedColor;
+      squareIcon.style.color = selectedColor ?? '';
       colorPicker?.close();
     },
     [colorPicker],
diff --git a/apps/demos/Demos/DropDownButton/Overview/ReactJs/ColorIcon.js b/apps/demos/Demos/DropDownButton/Overview/ReactJs/ColorIcon.js
index 7216cc311976..1badb53c0f28 100644
--- a/apps/demos/Demos/DropDownButton/Overview/ReactJs/ColorIcon.js
+++ b/apps/demos/Demos/DropDownButton/Overview/ReactJs/ColorIcon.js
@@ -4,7 +4,7 @@ const ColorIcon = ({ color, onClick }) => (
   <i
     onClick={() => onClick(color)}
     className="color dx-icon dx-icon-square"
-    style={{ color }}
+    style={{ color: color ?? undefined }}
   />
 );
 export default ColorIcon;
diff --git a/apps/demos/Demos/FileUploader/FileUploading/React/App.tsx b/apps/demos/Demos/FileUploader/FileUploading/React/App.tsx
index 8fe9d65bf32b..78da0c24f77e 100644
--- a/apps/demos/Demos/FileUploader/FileUploading/React/App.tsx
+++ b/apps/demos/Demos/FileUploader/FileUploading/React/App.tsx
@@ -22,6 +22,9 @@ export default function App() {
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
 
   const onSelectedFilesChanged = useCallback(({ value }: FileUploaderTypes.ValueChangedEvent): void => {
+    if (!value) {
+      return;
+    }
     setSelectedFiles(value);
   }, []);
 
diff --git a/apps/demos/Demos/FileUploader/FileUploading/ReactJs/App.js b/apps/demos/Demos/FileUploader/FileUploading/ReactJs/App.js
index 3ce3426699df..238803c6a6f6 100644
--- a/apps/demos/Demos/FileUploader/FileUploading/ReactJs/App.js
+++ b/apps/demos/Demos/FileUploader/FileUploading/ReactJs/App.js
@@ -17,6 +17,9 @@ export default function App() {
   const [accept, setAccept] = useState('*');
   const [selectedFiles, setSelectedFiles] = useState([]);
   const onSelectedFilesChanged = useCallback(({ value }) => {
+    if (!value) {
+      return;
+    }
     setSelectedFiles(value);
   }, []);
   const onAcceptChanged = useCallback(({ value }) => {
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts
index 08f723dd96f8..8bf5e56ccd39 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts
@@ -1,9 +1,6 @@
-import { type HtmlEditorTypes } from 'devextreme-react/html-editor';
-import {
-  AIIntegration,
-  RequestParams,
-  Response,
-} from 'devextreme-react/common/ai-integration';
+import type { HtmlEditorTypes } from 'devextreme-react/html-editor';
+import { AIIntegration } from 'devextreme-react/common/ai-integration';
+import type { AIResponse, RequestParams, Response } from 'devextreme-react/common/ai-integration';
 import { AzureOpenAI, OpenAI } from 'openai';
 
 type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
@@ -29,9 +26,7 @@ async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
   };
 
   const response = await aiService.chat.completions.create(params, { signal });
-  const result = response.choices[0].message?.content;
-
-  return result;
+  return response.choices[0].message?.content;
 }
 
 export const aiIntegration = new AIIntegration({
@@ -40,20 +35,18 @@ export const aiIntegration = new AIIntegration({
     const signal = controller.signal;
 
     const aiPrompt: AIMessage[] = [
-      { role: 'system', content: prompt.system },
-      { role: 'user', content: prompt.user },
+      { role: 'system', content: prompt.system ?? '' },
+      { role: 'user', content: prompt.user ?? '' },
     ];
 
-    const promise = getAIResponse(aiPrompt, signal);
+    const promise = getAIResponse(aiPrompt, signal) as Promise<AIResponse>;
 
-    const result: Response = {
+    return {
       promise,
       abort: () => {
         controller.abort();
       },
     };
-
-    return result;
   },
 });
 
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js
index 5c0e06d11bc7..f7d79dab710f 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js
@@ -17,25 +17,23 @@ async function getAIResponse(messages, signal) {
     temperature: 0.7,
   };
   const response = await aiService.chat.completions.create(params, { signal });
-  const result = response.choices[0].message?.content;
-  return result;
+  return response.choices[0].message?.content;
 }
 export const aiIntegration = new AIIntegration({
   sendRequest({ prompt }) {
     const controller = new AbortController();
     const signal = controller.signal;
     const aiPrompt = [
-      { role: 'system', content: prompt.system },
-      { role: 'user', content: prompt.user },
+      { role: 'system', content: prompt.system ?? '' },
+      { role: 'user', content: prompt.user ?? '' },
     ];
     const promise = getAIResponse(aiPrompt, signal);
-    const result = {
+    return {
       promise,
       abort: () => {
         controller.abort();
       },
     };
-    return result;
   },
 });
 export const markup = `
diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/App.tsx b/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/App.tsx
index 6e6ea186b3cb..c9bc59fc0f03 100644
--- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/App.tsx
+++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/App.tsx
@@ -16,34 +16,30 @@ const headerOptions = {
   },
 };
 const converter = {
-  toHtml(value) {
-    const result = unified()
+  toHtml(value: string): string {
+    return unified()
       .use(remarkParse)
       .use(remarkRehype)
       .use(rehypeStringify)
       .processSync(value)
       .toString();
-
-    return result;
   },
-  fromHtml(value) {
-    const result = unified()
+  fromHtml(value: string): string {
+    return unified()
       .use(rehypeParse)
       .use(rehypeRemark)
       .use(remarkStringify)
       .processSync(value)
       .toString();
-
-    return result;
   },
 };
 
 export default function App() {
-  const [valueContent, setValueContent] = useState(markup);
+  const [valueContent, setValueContent] = useState<string | undefined>(markup);
 
-  const valueChanged = useCallback((e: { value?: string; }) => {
-    setValueContent(e.value);
-  }, [setValueContent]);
+  const valueChanged = useCallback((e: { value?: string; }): void => {
+    setValueContent(e?.value);
+  }, []);
 
   return (
     <div className="widget-container">
diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/App.js b/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/App.js
index 3045be5a3c47..af1c9ac1845d 100644
--- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/App.js
+++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/App.js
@@ -17,32 +17,27 @@ const headerOptions = {
 };
 const converter = {
   toHtml(value) {
-    const result = unified()
+    return unified()
       .use(remarkParse)
       .use(remarkRehype)
       .use(rehypeStringify)
       .processSync(value)
       .toString();
-    return result;
   },
   fromHtml(value) {
-    const result = unified()
+    return unified()
       .use(rehypeParse)
       .use(rehypeRemark)
       .use(remarkStringify)
       .processSync(value)
       .toString();
-    return result;
   },
 };
 export default function App() {
   const [valueContent, setValueContent] = useState(markup);
-  const valueChanged = useCallback(
-    (e) => {
-      setValueContent(e.value);
-    },
-    [setValueContent],
-  );
+  const valueChanged = useCallback((e) => {
+    setValueContent(e?.value);
+  }, []);
   return (
     <div className="widget-container">
       <HtmlEditor
diff --git a/apps/demos/Demos/Map/Markers/React/App.tsx b/apps/demos/Demos/Map/Markers/React/App.tsx
index 09b4a171cc93..f4cba3301527 100644
--- a/apps/demos/Demos/Map/Markers/React/App.tsx
+++ b/apps/demos/Demos/Map/Markers/React/App.tsx
@@ -14,10 +14,10 @@ const apiKey = {
 
 const App = () => {
   const [currentMarkersData, setCurrentMarkersData] = useState<IMarkerProps[]>(markersData);
-  const [currentMarkerUrl, setCurrentMarkerUrl] = useState<string>(markerUrl);
+  const [currentMarkerUrl, setCurrentMarkerUrl] = useState<string | undefined>(markerUrl);
 
   const onCustomMarkersChange = useCallback((value: CheckBoxTypes.Properties['value']): void => {
-    setCurrentMarkerUrl(value ? currentMarkerUrl : null);
+    setCurrentMarkerUrl(value ? currentMarkerUrl : undefined);
     setCurrentMarkersData(markersData);
   }, [currentMarkerUrl]);
 
diff --git a/apps/demos/Demos/Map/Markers/ReactJs/App.js b/apps/demos/Demos/Map/Markers/ReactJs/App.js
index 5e9c2e1d3ca6..4655a1a2aece 100644
--- a/apps/demos/Demos/Map/Markers/ReactJs/App.js
+++ b/apps/demos/Demos/Map/Markers/ReactJs/App.js
@@ -14,7 +14,7 @@ const App = () => {
   const [currentMarkerUrl, setCurrentMarkerUrl] = useState(markerUrl);
   const onCustomMarkersChange = useCallback(
     (value) => {
-      setCurrentMarkerUrl(value ? currentMarkerUrl : null);
+      setCurrentMarkerUrl(value ? currentMarkerUrl : undefined);
       setCurrentMarkersData(markersData);
     },
     [currentMarkerUrl],
diff --git a/apps/demos/Demos/NumberBox/Overview/React/App.tsx b/apps/demos/Demos/NumberBox/Overview/React/App.tsx
index dee808b1756b..5358d71e8317 100644
--- a/apps/demos/Demos/NumberBox/Overview/React/App.tsx
+++ b/apps/demos/Demos/NumberBox/Overview/React/App.tsx
@@ -15,9 +15,9 @@ function App() {
   const [value, setValue] = useState(16);
 
   const keyDown = useCallback(({ event }: NumberBoxTypes.KeyDownEvent): void => {
-    const str = event.key;
+    const str = event?.key ?? '';
     if (/^[.,e]$/.test(str)) {
-      event.preventDefault();
+      event?.preventDefault();
     }
   }, []);
 
diff --git a/apps/demos/Demos/NumberBox/Overview/ReactJs/App.js b/apps/demos/Demos/NumberBox/Overview/ReactJs/App.js
index b565bb12e919..f18ae5037524 100644
--- a/apps/demos/Demos/NumberBox/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/NumberBox/Overview/ReactJs/App.js
@@ -11,9 +11,9 @@ const MAX_SALES = 30;
 function App() {
   const [value, setValue] = useState(16);
   const keyDown = useCallback(({ event }) => {
-    const str = event.key;
+    const str = event?.key ?? '';
     if (/^[.,e]$/.test(str)) {
-      event.preventDefault();
+      event?.preventDefault();
     }
   }, []);
   const valueChanged = useCallback(({ value }) => {
diff --git a/apps/demos/Demos/Popup/Overview/React/App.tsx b/apps/demos/Demos/Popup/Overview/React/App.tsx
index 2c07d2f1a6f1..0c68280dc11c 100644
--- a/apps/demos/Demos/Popup/Overview/React/App.tsx
+++ b/apps/demos/Demos/Popup/Overview/React/App.tsx
@@ -26,7 +26,7 @@ export default function App() {
   }, []);
 
   const sendEmail = useCallback(() => {
-    const message = `Email is sent to ${currentEmployee.FirstName} ${currentEmployee.LastName}`;
+    const message = `Email is sent to ${currentEmployee?.FirstName} ${currentEmployee?.LastName}`;
     notify(
       {
         message,
@@ -41,7 +41,7 @@ export default function App() {
   }, [currentEmployee]);
 
   const showMoreInfo = useCallback(() => {
-    const message = `More info about ${currentEmployee.FirstName} ${currentEmployee.LastName}`;
+    const message = `More info about ${currentEmployee?.FirstName} ${currentEmployee?.LastName}`;
     notify(
       {
         message,
diff --git a/apps/demos/Demos/Popup/Overview/ReactJs/App.js b/apps/demos/Demos/Popup/Overview/ReactJs/App.js
index 13008c5aaba9..a5ea640c8dea 100644
--- a/apps/demos/Demos/Popup/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Popup/Overview/ReactJs/App.js
@@ -18,7 +18,7 @@ export default function App() {
     setPopupVisible(false);
   }, []);
   const sendEmail = useCallback(() => {
-    const message = `Email is sent to ${currentEmployee.FirstName} ${currentEmployee.LastName}`;
+    const message = `Email is sent to ${currentEmployee?.FirstName} ${currentEmployee?.LastName}`;
     notify(
       {
         message,
@@ -32,7 +32,7 @@ export default function App() {
     );
   }, [currentEmployee]);
   const showMoreInfo = useCallback(() => {
-    const message = `More info about ${currentEmployee.FirstName} ${currentEmployee.LastName}`;
+    const message = `More info about ${currentEmployee?.FirstName} ${currentEmployee?.LastName}`;
     notify(
       {
         message,
diff --git a/apps/demos/Demos/RadioGroup/Overview/React/App.tsx b/apps/demos/Demos/RadioGroup/Overview/React/App.tsx
index 55058a97c2d6..e5960ec3b2b7 100644
--- a/apps/demos/Demos/RadioGroup/Overview/React/App.tsx
+++ b/apps/demos/Demos/RadioGroup/Overview/React/App.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback, useState } from 'react';
-import RadioGroup, { type RadioGroupTypes } from 'devextreme-react/radio-group';
+import RadioGroup from 'devextreme-react/radio-group';
+import type { RadioGroupTypes } from 'devextreme-react/radio-group';
 import { priorities, priorityEntities, tasks } from './data.ts';
 
-const renderCustomItem = (data) => <div>{data}</div>;
+const renderCustomItem = (data: string) => <div>{data}</div>;
 
 function App() {
   const [colorPriority, setColorPriority] = useState(priorities[2]);
diff --git a/apps/demos/Demos/RangeSlider/Overview/React/App.tsx b/apps/demos/Demos/RangeSlider/Overview/React/App.tsx
index 0fdf30cec171..233fe2192f47 100644
--- a/apps/demos/Demos/RangeSlider/Overview/React/App.tsx
+++ b/apps/demos/Demos/RangeSlider/Overview/React/App.tsx
@@ -20,21 +20,24 @@ function format(value: number): string {
   return `${value}%`;
 }
 
+const MIN_VALUE = 0;
+const MAX_VALUE = 100;
+
 function App() {
   const [startValue, setStartValue] = useState<number>(10);
   const [endValue, setEndValue] = useState<number>(90);
 
   const onRangeChanged = useCallback((data: RangeSliderTypes.ValueChangedEvent): void => {
-    setStartValue(data.start);
-    setEndValue(data.end);
+    setStartValue(data.start ?? MIN_VALUE);
+    setEndValue(data.end ?? MAX_VALUE);
   }, []);
 
   const onStartChanged = useCallback((data: NumberBoxTypes.ValueChangedEvent): void => {
-    setStartValue(data.value);
+    setStartValue(data.value ?? MIN_VALUE);
   }, []);
 
   const onEndChanged = useCallback((data: NumberBoxTypes.ValueChangedEvent): void => {
-    setEndValue(data.value);
+    setEndValue(data.value ?? MAX_VALUE);
   }, []);
 
   return (
@@ -43,13 +46,13 @@ function App() {
         <div className="dx-field">
           <div className="dx-field-label">Default mode</div>
           <div className="dx-field-value">
-            <RangeSlider min={0} max={100} defaultValue={defaultValues.defaultMode} />
+            <RangeSlider min={MIN_VALUE} max={MAX_VALUE} defaultValue={defaultValues.defaultMode} />
           </div>
         </div>
         <div className="dx-field custom-height-slider">
           <div className="dx-field-label">With labels</div>
           <div className="dx-field-value">
-            <RangeSlider min={0} max={100} defaultValue={defaultValues.labels}>
+            <RangeSlider min={MIN_VALUE} max={MAX_VALUE} defaultValue={defaultValues.labels}>
               <Label visible={true} format={format} position="top" />
             </RangeSlider>
           </div>
@@ -57,7 +60,7 @@ function App() {
         <div className="dx-field custom-height-slider">
           <div className="dx-field-label">With tooltips</div>
           <div className="dx-field-value">
-            <RangeSlider min={0} max={100} defaultValue={defaultValues.tooltips}>
+            <RangeSlider min={MIN_VALUE} max={MAX_VALUE} defaultValue={defaultValues.tooltips}>
               <Tooltip enabled={true} format={format} showMode="always" position="bottom" />
             </RangeSlider>
           </div>
@@ -66,8 +69,8 @@ function App() {
           <div className="dx-field-label">Without range highlighting</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               defaultValue={defaultValues.withoutRangeHighlighting}
               showRange={false} />
           </div>
@@ -75,7 +78,7 @@ function App() {
         <div className="dx-field">
           <div className="dx-field-label">With discrete step</div>
           <div className="dx-field-value">
-            <RangeSlider min={0} max={100} defaultValue={defaultValues.discreteStep} step={10}>
+            <RangeSlider min={MIN_VALUE} max={MAX_VALUE} defaultValue={defaultValues.discreteStep} step={10}>
               <Tooltip enabled={true} />
             </RangeSlider>
           </div>
@@ -84,8 +87,8 @@ function App() {
           <div className="dx-field-label">Disabled</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               defaultValue={defaultValues.disabled}
               disabled={true} />
           </div>
@@ -97,8 +100,8 @@ function App() {
           <div className="dx-field-label">On handle movement</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               start={startValue}
               end={endValue}
               onValueChanged={onRangeChanged} />
@@ -108,8 +111,8 @@ function App() {
           <div className="dx-field-label">On handle release</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               start={startValue}
               end={endValue}
               valueChangeMode="onHandleRelease"
@@ -121,8 +124,8 @@ function App() {
           <div className="dx-field-value">
             <NumberBox
               value={startValue}
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               showSpinButtons={true}
               inputAttr={startValueLabel}
               onValueChanged={onStartChanged} />
@@ -133,8 +136,8 @@ function App() {
           <div className="dx-field-value">
             <NumberBox
               value={endValue}
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               showSpinButtons={true}
               inputAttr={endValueLabel}
               onValueChanged={onEndChanged} />
diff --git a/apps/demos/Demos/RangeSlider/Overview/ReactJs/App.js b/apps/demos/Demos/RangeSlider/Overview/ReactJs/App.js
index 5ec9c8673f45..2f4724db65cc 100644
--- a/apps/demos/Demos/RangeSlider/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/RangeSlider/Overview/ReactJs/App.js
@@ -15,18 +15,20 @@ const endValueLabel = { 'aria-label': 'End Value' };
 function format(value) {
   return `${value}%`;
 }
+const MIN_VALUE = 0;
+const MAX_VALUE = 100;
 function App() {
   const [startValue, setStartValue] = useState(10);
   const [endValue, setEndValue] = useState(90);
   const onRangeChanged = useCallback((data) => {
-    setStartValue(data.start);
-    setEndValue(data.end);
+    setStartValue(data.start ?? MIN_VALUE);
+    setEndValue(data.end ?? MAX_VALUE);
   }, []);
   const onStartChanged = useCallback((data) => {
-    setStartValue(data.value);
+    setStartValue(data.value ?? MIN_VALUE);
   }, []);
   const onEndChanged = useCallback((data) => {
-    setEndValue(data.value);
+    setEndValue(data.value ?? MAX_VALUE);
   }, []);
   return (
     <div className="form">
@@ -35,8 +37,8 @@ function App() {
           <div className="dx-field-label">Default mode</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               defaultValue={defaultValues.defaultMode}
             />
           </div>
@@ -45,8 +47,8 @@ function App() {
           <div className="dx-field-label">With labels</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               defaultValue={defaultValues.labels}
             >
               <Label
@@ -61,8 +63,8 @@ function App() {
           <div className="dx-field-label">With tooltips</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               defaultValue={defaultValues.tooltips}
             >
               <Tooltip
@@ -78,8 +80,8 @@ function App() {
           <div className="dx-field-label">Without range highlighting</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               defaultValue={defaultValues.withoutRangeHighlighting}
               showRange={false}
             />
@@ -89,8 +91,8 @@ function App() {
           <div className="dx-field-label">With discrete step</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               defaultValue={defaultValues.discreteStep}
               step={10}
             >
@@ -102,8 +104,8 @@ function App() {
           <div className="dx-field-label">Disabled</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               defaultValue={defaultValues.disabled}
               disabled={true}
             />
@@ -116,8 +118,8 @@ function App() {
           <div className="dx-field-label">On handle movement</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               start={startValue}
               end={endValue}
               onValueChanged={onRangeChanged}
@@ -128,8 +130,8 @@ function App() {
           <div className="dx-field-label">On handle release</div>
           <div className="dx-field-value">
             <RangeSlider
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               start={startValue}
               end={endValue}
               valueChangeMode="onHandleRelease"
@@ -142,8 +144,8 @@ function App() {
           <div className="dx-field-value">
             <NumberBox
               value={startValue}
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               showSpinButtons={true}
               inputAttr={startValueLabel}
               onValueChanged={onStartChanged}
@@ -155,8 +157,8 @@ function App() {
           <div className="dx-field-value">
             <NumberBox
               value={endValue}
-              min={0}
-              max={100}
+              min={MIN_VALUE}
+              max={MAX_VALUE}
               showSpinButtons={true}
               inputAttr={endValueLabel}
               onValueChanged={onEndChanged}
diff --git a/apps/demos/Demos/SelectBox/CustomizeDropDownButton/React/item.tsx b/apps/demos/Demos/SelectBox/CustomizeDropDownButton/React/item.tsx
index f8e637717377..de4a47cade3d 100644
--- a/apps/demos/Demos/SelectBox/CustomizeDropDownButton/React/item.tsx
+++ b/apps/demos/Demos/SelectBox/CustomizeDropDownButton/React/item.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 
-export default function Item({ IconSrc, Name }) {
+interface ItemProps {
+  IconSrc: string;
+  Name: string;
+}
+
+export default function Item({ IconSrc, Name }: ItemProps) {
   return (
     <div className="custom-item">
       <img
diff --git a/apps/demos/Demos/SelectBox/Grouping/React/Group.tsx b/apps/demos/Demos/SelectBox/Grouping/React/Group.tsx
index 7aefdc9df526..a6935a69649d 100644
--- a/apps/demos/Demos/SelectBox/Grouping/React/Group.tsx
+++ b/apps/demos/Demos/SelectBox/Grouping/React/Group.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
-export default function Group({ key }) {
+interface GroupProps {
+  key: string;
+}
+
+export default function Group({ key }: GroupProps) {
   return (
     <div className="custom-icon">
       <span className="dx-icon-box icon"></span> {key}
diff --git a/apps/demos/Demos/SelectBox/Overview/React/App.tsx b/apps/demos/Demos/SelectBox/Overview/React/App.tsx
index 6b1dadc2a228..e84bb1fd0dad 100644
--- a/apps/demos/Demos/SelectBox/Overview/React/App.tsx
+++ b/apps/demos/Demos/SelectBox/Overview/React/App.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import SelectBox, { FieldAddons, type SelectBoxTypes } from 'devextreme-react/select-box';
+import SelectBox, { FieldAddons } from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
 import { ArrayStore } from 'devextreme-react/common/data';
 import notify from 'devextreme/ui/notify';
 
@@ -25,7 +26,7 @@ const data = new ArrayStore({
 function App() {
   const [value, setValue] = useState(service.getSimpleProducts()[0]);
 
-  const onValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+  const onValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent): void => {
     setValue(e.value);
     notify(`The value is changed to: "${e.value}"`);
   }, []);
diff --git a/apps/demos/Demos/SelectBox/Overview/React/Item.tsx b/apps/demos/Demos/SelectBox/Overview/React/Item.tsx
index ee8de84c5580..2d736b68678e 100644
--- a/apps/demos/Demos/SelectBox/Overview/React/Item.tsx
+++ b/apps/demos/Demos/SelectBox/Overview/React/Item.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 
-export default function Item(data) {
+interface ItemProps {
+  ImageSrc: string;
+  Name: string;
+}
+
+export default function Item(data: ItemProps) {
   return (
     <div className="custom-item">
       <img
diff --git a/apps/demos/Demos/SelectBox/SearchAndEditing/React/App.tsx b/apps/demos/Demos/SelectBox/SearchAndEditing/React/App.tsx
index 352fdcfc948a..715facd70565 100644
--- a/apps/demos/Demos/SelectBox/SearchAndEditing/React/App.tsx
+++ b/apps/demos/Demos/SelectBox/SearchAndEditing/React/App.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback, useState } from 'react';
 
-import { SimplifiedSearchMode } from 'devextreme-react/common';
+import type { SimplifiedSearchMode } from 'devextreme-react/common';
 
-import { SelectBox, type SelectBoxTypes } from 'devextreme-react/select-box';
+import { SelectBox } from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
 import { NumberBox } from 'devextreme-react/number-box';
 import { CheckBox } from 'devextreme-react/check-box';
 
diff --git a/apps/demos/Demos/Slider/Overview/React/App.tsx b/apps/demos/Demos/Slider/Overview/React/App.tsx
index 5ad6af67220d..935ca578c519 100644
--- a/apps/demos/Demos/Slider/Overview/React/App.tsx
+++ b/apps/demos/Demos/Slider/Overview/React/App.tsx
@@ -4,7 +4,7 @@ import { NumberBox } from 'devextreme-react/number-box';
 
 const sliderValueLabel = { 'aria-label': 'Slider Value' };
 
-const format = (value) => `${value}%`;
+const format = (value: number): string => `${value}%`;
 
 function App() {
   const [sliderValue, setSliderValue] = useState(10);
diff --git a/apps/demos/Demos/SpeechToText/Overview/React/App.tsx b/apps/demos/Demos/SpeechToText/Overview/React/App.tsx
index ca977b27c8b8..22d9a4d6d6d6 100644
--- a/apps/demos/Demos/SpeechToText/Overview/React/App.tsx
+++ b/apps/demos/Demos/SpeechToText/Overview/React/App.tsx
@@ -1,11 +1,13 @@
 import React, { useCallback, useState } from 'react';
 import { SpeechToText } from 'devextreme-react/speech-to-text';
 import { TextArea } from 'devextreme-react/text-area';
-import { Button, ButtonTypes } from 'devextreme-react/button';
+import { Button } from 'devextreme-react/button';
+import type { ButtonTypes } from 'devextreme-react/button';
 import { SelectBox } from 'devextreme-react/select-box';
 import { Switch } from 'devextreme-react/switch';
 import notify from 'devextreme/ui/notify';
 import { displayModes, stylingModes, types, languages, langMap } from './data.ts';
+import type { Language } from './data.ts';
 
 declare global {
   interface Window {
@@ -30,7 +32,7 @@ export default function App() {
   const [hint, setHint] = useState<string>('Start voice recognition');
   const [disabled, setDisabled] = useState<boolean>(false);
   const [textAreaValue, setTextAreaValue] = useState<string>('');
-  const [language, setLanguage] = useState<string>(languages[0]);
+  const [language, setLanguage] = useState<Language>(languages[0]);
   const [interimResults, setInterimResults] = useState<boolean>(true);
   const [continuous, setContinuous] = useState<boolean>(false);
   const [animation, setAnimation] = useState<boolean>(true);
diff --git a/apps/demos/Demos/SpeechToText/Overview/React/data.ts b/apps/demos/Demos/SpeechToText/Overview/React/data.ts
index c9cf06deedb4..82dd594e3dd9 100644
--- a/apps/demos/Demos/SpeechToText/Overview/React/data.ts
+++ b/apps/demos/Demos/SpeechToText/Overview/React/data.ts
@@ -1,4 +1,4 @@
-import { ButtonTypes } from 'devextreme-react/button';
+import type { ButtonTypes } from 'devextreme-react/button';
 
 export const displayModes = ['Icon Only', 'Text and Icon', 'Custom'];
 
@@ -36,14 +36,6 @@ export const types: { displayValue: string; value: ButtonTypes.ButtonType }[] =
   },
 ];
 
-export const languages = [
-  'Auto-detect',
-  'English',
-  'Spanish',
-  'French',
-  'German',
-];
-
 export const langMap = {
   "Auto-detect": '',
   "English": 'en-US',
@@ -51,3 +43,7 @@ export const langMap = {
   "French": 'fr-FR',
   "German": 'de-DE',
 };
+
+export type Language = keyof typeof langMap;
+
+export const languages: readonly Language[] = Object.keys(langMap) as Language[];
diff --git a/apps/demos/Demos/SpeechToText/Overview/ReactJs/data.js b/apps/demos/Demos/SpeechToText/Overview/ReactJs/data.js
index acb3d80c69ae..67b835b0201a 100644
--- a/apps/demos/Demos/SpeechToText/Overview/ReactJs/data.js
+++ b/apps/demos/Demos/SpeechToText/Overview/ReactJs/data.js
@@ -31,7 +31,6 @@ export const types = [
     value: 'danger',
   },
 ];
-export const languages = ['Auto-detect', 'English', 'Spanish', 'French', 'German'];
 export const langMap = {
   'Auto-detect': '',
   English: 'en-US',
@@ -39,3 +38,4 @@ export const langMap = {
   French: 'fr-FR',
   German: 'de-DE',
 };
+export const languages = Object.keys(langMap);
diff --git a/apps/demos/Demos/Stepper/FormIntegration/React/Confirmation.tsx b/apps/demos/Demos/Stepper/FormIntegration/React/Confirmation.tsx
index 87e3536d8984..d91930b3166a 100644
--- a/apps/demos/Demos/Stepper/FormIntegration/React/Confirmation.tsx
+++ b/apps/demos/Demos/Stepper/FormIntegration/React/Confirmation.tsx
@@ -24,10 +24,10 @@ const Confirmation: FC<ConfirmationProps> = ({ formData, isConfirmed }: Confirma
         <div className="summary-item-header">Dates</div>
         <div className="separator"></div>
         <div>
-          <span className="summary-item-label">Check-in Date: </span>{new Date(formData.dates[0]).toLocaleDateString()}
+          <span className="summary-item-label">Check-in Date: </span>{new Date(formData.dates[0] ?? '').toLocaleDateString()}
         </div>
         <div>
-          <span className="summary-item-label">Check-out Date: </span>{new Date(formData.dates[1]).toLocaleDateString()}
+          <span className="summary-item-label">Check-out Date: </span>{new Date(formData.dates[1] ?? '').toLocaleDateString()}
         </div>
       </div>
 
diff --git a/apps/demos/Demos/Stepper/FormIntegration/ReactJs/Confirmation.js b/apps/demos/Demos/Stepper/FormIntegration/ReactJs/Confirmation.js
index 10941479adf9..35551c70c542 100644
--- a/apps/demos/Demos/Stepper/FormIntegration/ReactJs/Confirmation.js
+++ b/apps/demos/Demos/Stepper/FormIntegration/ReactJs/Confirmation.js
@@ -12,11 +12,11 @@ const Confirmation = ({ formData, isConfirmed }) => {
         <div className="separator"></div>
         <div>
           <span className="summary-item-label">Check-in Date: </span>
-          {new Date(formData.dates[0]).toLocaleDateString()}
+          {new Date(formData.dates[0] ?? '').toLocaleDateString()}
         </div>
         <div>
           <span className="summary-item-label">Check-out Date: </span>
-          {new Date(formData.dates[1]).toLocaleDateString()}
+          {new Date(formData.dates[1] ?? '').toLocaleDateString()}
         </div>
       </div>
 
diff --git a/apps/demos/Demos/TagBox/Overview/React/App.tsx b/apps/demos/Demos/TagBox/Overview/React/App.tsx
index 21df48dc19ee..0b11707c61a2 100644
--- a/apps/demos/Demos/TagBox/Overview/React/App.tsx
+++ b/apps/demos/Demos/TagBox/Overview/React/App.tsx
@@ -18,14 +18,14 @@ const dataSource = new ArrayStore({
 
 function App() {
   const [editableProducts, setEditableProducts] = useState<string[]>([...simpleProducts]);
-  const [target, setTarget] = useState<HTMLElement | null>(null);
+  const [target, setTarget] = useState<HTMLElement>();
   const [product, setProduct] = useState<Product | null>(null);
 
   const onCustomItemCreating = useCallback(
     (args: TagBoxTypes.CustomItemCreatingEvent): void => {
       const newValue = args.text;
       const isItemInDataSource = editableProducts.some((item: string): boolean => item === newValue);
-      if (!isItemInDataSource) {
+      if (!isItemInDataSource && newValue) {
         setEditableProducts([newValue, ...editableProducts]);
       }
       args.customItem = newValue;
diff --git a/apps/demos/Demos/TagBox/Overview/React/Tag.tsx b/apps/demos/Demos/TagBox/Overview/React/Tag.tsx
index 58c2d37b0407..27b4a42b8b66 100644
--- a/apps/demos/Demos/TagBox/Overview/React/Tag.tsx
+++ b/apps/demos/Demos/TagBox/Overview/React/Tag.tsx
@@ -3,7 +3,7 @@ import type { Product } from './types.ts';
 
 interface TagProps {
   product: Product;
-  onMouseEnter: (e: React.MouseEvent, product: Product) => void;
+  onMouseEnter: (e: React.MouseEvent<HTMLElement>, product: Product) => void;
   getAltText: (text: string) => string;
 }
 
@@ -13,7 +13,7 @@ export default function Tag({ product, onMouseEnter, getAltText }: TagProps) {
     <>
       <div
         className={`dx-tag-content ${isDisabled && 'disabled-tag'}`}
-        onMouseEnter={(e: React.MouseEvent): void => onMouseEnter(e, product)}
+        onMouseEnter={(e: React.MouseEvent<HTMLElement>): void => onMouseEnter(e, product)}
         aria-disabled={isDisabled}
       >
         <img
diff --git a/apps/demos/Demos/TagBox/Overview/React/types.ts b/apps/demos/Demos/TagBox/Overview/React/types.ts
index f2201486b728..995bcd46e461 100644
--- a/apps/demos/Demos/TagBox/Overview/React/types.ts
+++ b/apps/demos/Demos/TagBox/Overview/React/types.ts
@@ -2,7 +2,7 @@ export type Product = {
   Id: number,
   Name: string,
   Price: number,
-  Current_Inventory: number,
+  Current_Inventory: number | null,
   Backorder: number,
   Manufacturing: number,
   Category: string,
diff --git a/apps/demos/Demos/TagBox/Overview/ReactJs/App.js b/apps/demos/Demos/TagBox/Overview/ReactJs/App.js
index 4196f8d27060..dbcc4858f1df 100644
--- a/apps/demos/Demos/TagBox/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/TagBox/Overview/ReactJs/App.js
@@ -14,13 +14,13 @@ const dataSource = new ArrayStore({
 });
 function App() {
   const [editableProducts, setEditableProducts] = useState([...simpleProducts]);
-  const [target, setTarget] = useState(null);
+  const [target, setTarget] = useState();
   const [product, setProduct] = useState(null);
   const onCustomItemCreating = useCallback(
     (args) => {
       const newValue = args.text;
       const isItemInDataSource = editableProducts.some((item) => item === newValue);
-      if (!isItemInDataSource) {
+      if (!isItemInDataSource && newValue) {
         setEditableProducts([newValue, ...editableProducts]);
       }
       args.customItem = newValue;
diff --git a/apps/demos/Demos/TagBox/TagCountLimitation/React/App.tsx b/apps/demos/Demos/TagBox/TagCountLimitation/React/App.tsx
index a23ca86cd806..36f1c40914ba 100644
--- a/apps/demos/Demos/TagBox/TagCountLimitation/React/App.tsx
+++ b/apps/demos/Demos/TagBox/TagCountLimitation/React/App.tsx
@@ -13,7 +13,7 @@ const defaultValues = {
 const items: Product[] = products.slice(0, 5);
 
 const onMultiTagPreparing = (args: TagBoxTypes.MultiTagPreparingEvent): void => {
-  const selectedItemsLength = args.selectedItems.length;
+  const selectedItemsLength = args.selectedItems?.length ?? 0;
   const totalCount = 5;
 
   if (selectedItemsLength < totalCount) {
diff --git a/apps/demos/Demos/TagBox/TagCountLimitation/ReactJs/App.js b/apps/demos/Demos/TagBox/TagCountLimitation/ReactJs/App.js
index 9cb73c3a50cf..cb7051c519be 100644
--- a/apps/demos/Demos/TagBox/TagCountLimitation/ReactJs/App.js
+++ b/apps/demos/Demos/TagBox/TagCountLimitation/ReactJs/App.js
@@ -9,7 +9,7 @@ const defaultValues = {
 };
 const items = products.slice(0, 5);
 const onMultiTagPreparing = (args) => {
-  const selectedItemsLength = args.selectedItems.length;
+  const selectedItemsLength = args.selectedItems?.length ?? 0;
   const totalCount = 5;
   if (selectedItemsLength < totalCount) {
     args.cancel = true;
diff --git a/apps/demos/Demos/TextArea/Overview/React/App.tsx b/apps/demos/Demos/TextArea/Overview/React/App.tsx
index d0674fd5c38b..1542785ed9e7 100644
--- a/apps/demos/Demos/TextArea/Overview/React/App.tsx
+++ b/apps/demos/Demos/TextArea/Overview/React/App.tsx
@@ -14,7 +14,7 @@ const eventLabel = { 'aria-label': 'Event' };
 function App() {
   const [value, setValue] = useState<string>(content);
   const [valueForEditableTestArea, setValueForEditableTestArea] = useState<string>(content);
-  const [maxLength, setMaxLength] = useState<number | null>(null);
+  const [maxLength, setMaxLength] = useState<number | undefined>(undefined);
   const [eventValue, setEventValue] = useState<string>(valueChangeEvents[0].name);
   const [autoResizeEnabled, setAutoResizeEnabled] = useState<boolean>(false);
   const [height, setHeight] = useState<number | undefined>(90);
@@ -22,7 +22,7 @@ function App() {
   const onCheckboxValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent): void => {
     const str = content;
     setValue(e.value ? str.substring(0, 100) : str);
-    setMaxLength(e.value ? 100 : null);
+    setMaxLength(e.value ? 100 : undefined);
   }, []);
 
   const onAutoResizeChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent): void => {
diff --git a/apps/demos/Demos/TextArea/Overview/ReactJs/App.js b/apps/demos/Demos/TextArea/Overview/ReactJs/App.js
index 3c1274107fe5..5f26fb60898b 100644
--- a/apps/demos/Demos/TextArea/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/TextArea/Overview/ReactJs/App.js
@@ -9,14 +9,14 @@ const eventLabel = { 'aria-label': 'Event' };
 function App() {
   const [value, setValue] = useState(content);
   const [valueForEditableTestArea, setValueForEditableTestArea] = useState(content);
-  const [maxLength, setMaxLength] = useState(null);
+  const [maxLength, setMaxLength] = useState(undefined);
   const [eventValue, setEventValue] = useState(valueChangeEvents[0].name);
   const [autoResizeEnabled, setAutoResizeEnabled] = useState(false);
   const [height, setHeight] = useState(90);
   const onCheckboxValueChanged = useCallback((e) => {
     const str = content;
     setValue(e.value ? str.substring(0, 100) : str);
-    setMaxLength(e.value ? 100 : null);
+    setMaxLength(e.value ? 100 : undefined);
   }, []);
   const onAutoResizeChanged = useCallback((e) => {
     setAutoResizeEnabled(e.value);
diff --git a/apps/demos/Demos/Toast/Stack/React/App.tsx b/apps/demos/Demos/Toast/Stack/React/App.tsx
index 08c1448de8ce..1583dee24cad 100644
--- a/apps/demos/Demos/Toast/Stack/React/App.tsx
+++ b/apps/demos/Demos/Toast/Stack/React/App.tsx
@@ -95,7 +95,7 @@ function App() {
           <NumberBox
             visible={!isPredefined}
             placeholder='top'
-            defaultValue={null}
+            defaultValue={undefined}
             valueChangeEvent='keyup'
             disabled={!!coordinatePosition.bottom}
             inputAttr={positionTopLabel}
@@ -103,7 +103,7 @@ function App() {
           <NumberBox
             visible={!isPredefined}
             placeholder='bottom'
-            defaultValue={null}
+            defaultValue={undefined}
             valueChangeEvent='keyup'
             inputAttr={positionBottomLabel}
             disabled={!!coordinatePosition.top}
@@ -113,7 +113,7 @@ function App() {
           <NumberBox
             visible={!isPredefined}
             placeholder='left'
-            defaultValue={null}
+            defaultValue={undefined}
             valueChangeEvent='keyup'
             inputAttr={positionLeftLabel}
             disabled={!!coordinatePosition.right}
@@ -121,7 +121,7 @@ function App() {
           <NumberBox
             visible={!isPredefined}
             placeholder='right'
-            defaultValue={null}
+            defaultValue={undefined}
             valueChangeEvent='keyup'
             inputAttr={positionRightLabel}
             disabled={!!coordinatePosition.left}
diff --git a/apps/demos/Demos/Toast/Stack/ReactJs/App.js b/apps/demos/Demos/Toast/Stack/ReactJs/App.js
index 549bc1eae5bc..e94d0320d368 100644
--- a/apps/demos/Demos/Toast/Stack/ReactJs/App.js
+++ b/apps/demos/Demos/Toast/Stack/ReactJs/App.js
@@ -93,7 +93,7 @@ function App() {
           <NumberBox
             visible={!isPredefined}
             placeholder="top"
-            defaultValue={null}
+            defaultValue={undefined}
             valueChangeEvent="keyup"
             disabled={!!coordinatePosition.bottom}
             inputAttr={positionTopLabel}
@@ -102,7 +102,7 @@ function App() {
           <NumberBox
             visible={!isPredefined}
             placeholder="bottom"
-            defaultValue={null}
+            defaultValue={undefined}
             valueChangeEvent="keyup"
             inputAttr={positionBottomLabel}
             disabled={!!coordinatePosition.top}
@@ -113,7 +113,7 @@ function App() {
           <NumberBox
             visible={!isPredefined}
             placeholder="left"
-            defaultValue={null}
+            defaultValue={undefined}
             valueChangeEvent="keyup"
             inputAttr={positionLeftLabel}
             disabled={!!coordinatePosition.right}
@@ -122,7 +122,7 @@ function App() {
           <NumberBox
             visible={!isPredefined}
             placeholder="right"
-            defaultValue={null}
+            defaultValue={undefined}
             valueChangeEvent="keyup"
             inputAttr={positionRightLabel}
             disabled={!!coordinatePosition.left}
diff --git a/apps/demos/Demos/Validation/Overview/React/App.tsx b/apps/demos/Demos/Validation/Overview/React/App.tsx
index c1d852717f98..bf2f64d7d999 100644
--- a/apps/demos/Demos/Validation/Overview/React/App.tsx
+++ b/apps/demos/Demos/Validation/Overview/React/App.tsx
@@ -102,7 +102,7 @@ function App() {
     (e: TextBoxTypes.ValueChangedEvent): void => {
       setPassword(e.value);
       if (confirmPassword) {
-        validatorRef.current.instance().validate();
+        validatorRef.current?.instance().validate();
       }
     },
     [confirmPassword],
diff --git a/apps/demos/Demos/Validation/Overview/ReactJs/App.js b/apps/demos/Demos/Validation/Overview/ReactJs/App.js
index 839e7082388a..544c248b9a0c 100644
--- a/apps/demos/Demos/Validation/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Validation/Overview/ReactJs/App.js
@@ -86,7 +86,7 @@ function App() {
     (e) => {
       setPassword(e.value);
       if (confirmPassword) {
-        validatorRef.current.instance().validate();
+        validatorRef.current?.instance().validate();
       }
     },
     [confirmPassword],
diff --git a/apps/demos/tsconfig.react-check.json b/apps/demos/tsconfig.react-check.json
index d6ef268b8a50..dbf16f035daa 100644
--- a/apps/demos/tsconfig.react-check.json
+++ b/apps/demos/tsconfig.react-check.json
@@ -17,65 +17,21 @@
     "Demos/**/React/**/*.ts"
   ],
   "exclude": [
-   "Demos/Autocomplete/**/React/**/*.ts",
-   "Demos/Autocomplete/**/React/**/*.tsx",
-   "Demos/Calendar/**/React/**/*.ts",
-   "Demos/Calendar/**/React/**/*.tsx",
-   "Demos/Chat/**/React/**/*.ts",
-   "Demos/Chat/**/React/**/*.tsx",
-   "Demos/Common/EditorsRightToLeftSupport/React/**/*.ts",
-   "Demos/Common/EditorsRightToLeftSupport/React/**/*.tsx",
-   "Demos/Common/PopupAndNotificationsOverview/React/**/*.ts",
-   "Demos/Common/PopupAndNotificationsOverview/React/**/*.tsx",
    "Demos/Diagram/**/React/**/*.ts",
    "Demos/Diagram/**/React/**/*.tsx",
-   "Demos/DropDownBox/**/React/**/*.ts",
-   "Demos/DropDownBox/**/React/**/*.tsx",
-   "Demos/DropDownButton/**/React/**/*.ts",
-   "Demos/DropDownButton/**/React/**/*.tsx",
    "Demos/FileManager/**/React/**/*.ts",
    "Demos/FileManager/**/React/**/*.tsx",
-   "Demos/FileUploader/**/React/**/*.ts",
-   "Demos/FileUploader/**/React/**/*.tsx",
    "Demos/FloatingActionButton/**/React/**/*.ts",
    "Demos/FloatingActionButton/**/React/**/*.tsx",
    "Demos/Gantt/**/React/**/*.ts",
    "Demos/Gantt/**/React/**/*.tsx",
-   "Demos/HtmlEditor/**/React/**/*.ts",
-   "Demos/HtmlEditor/**/React/**/*.tsx",
-   "Demos/Localization/**/React/**/*.ts",
-   "Demos/Localization/**/React/**/*.tsx",
-   "Demos/Map/**/React/**/*.ts",
-   "Demos/Map/**/React/**/*.tsx",
-   "Demos/NumberBox/**/React/**/*.ts",
-   "Demos/NumberBox/**/React/**/*.tsx",
    "Demos/Pagination/**/React/**/*.ts",
    "Demos/Pagination/**/React/**/*.tsx",
-   "Demos/Popup/**/React/**/*.ts",
-   "Demos/Popup/**/React/**/*.tsx",
-   "Demos/RadioGroup/**/React/**/*.ts",
-   "Demos/RadioGroup/**/React/**/*.tsx",
-   "Demos/RangeSlider/**/React/**/*.ts",
-   "Demos/RangeSlider/**/React/**/*.tsx",
    "Demos/Scheduler/**/React/**/*.ts",
    "Demos/Scheduler/**/React/**/*.tsx",
-   "Demos/SelectBox/**/React/**/*.ts",
-   "Demos/SelectBox/**/React/**/*.tsx",
-   "Demos/Slider/**/React/**/*.ts",
-   "Demos/Slider/**/React/**/*.tsx",
-   "Demos/SpeechToText/**/React/**/*.ts",
-   "Demos/SpeechToText/**/React/**/*.tsx",
-   "Demos/Stepper/**/React/**/*.ts",
-   "Demos/Stepper/**/React/**/*.tsx",
-   "Demos/TagBox/**/React/**/*.ts",
-   "Demos/TagBox/**/React/**/*.tsx",
-   "Demos/TextArea/**/React/**/*.ts",
-   "Demos/TextArea/**/React/**/*.tsx",
-   "Demos/Toast/**/React/**/*.ts",
-   "Demos/Toast/**/React/**/*.tsx",
-   "Demos/Validation/**/React/**/*.ts",
-   "Demos/Validation/**/React/**/*.tsx",
    "Demos/VectorMap/**/React/**/*.ts",
-   "Demos/VectorMap/**/React/**/*.tsx"
+   "Demos/VectorMap/**/React/**/*.tsx",
+   "Demos/Localization/**/React/**/*.ts",
+   "Demos/Localization/**/React/**/*.tsx"
   ]
 }