diff --git a/apps/demos/Demos/PivotGrid/ChartIntegration/React/App.tsx b/apps/demos/Demos/PivotGrid/ChartIntegration/React/App.tsx
index 4ecc0783c96f..849a79b1530b 100644
--- a/apps/demos/Demos/PivotGrid/ChartIntegration/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/ChartIntegration/React/App.tsx
@@ -1,25 +1,21 @@
 import React, { useEffect, useRef } from 'react';
 
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
-
 import Chart, {
   AdaptiveLayout,
   CommonSeriesSettings,
   Size,
   Tooltip,
-  ChartRef,
 } from 'devextreme-react/chart';
-
-import PivotGrid, {
-  FieldChooser,
-  PivotGridRef,
-} from 'devextreme-react/pivot-grid';
+import type { ChartRef, ChartTypes } from 'devextreme-react/chart';
+import PivotGrid, { FieldChooser } from 'devextreme-react/pivot-grid';
+import type { PivotGridRef } from 'devextreme-react/pivot-grid';
 
 import { sales } from './data.ts';
 
-const customizeTooltip = (args) => {
+const customizeTooltip = (args: ChartTypes.CommonPointInfo) => {
   const valueText = (args.seriesName.indexOf('Total') !== -1)
-    ? new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD' }).format(args.originalValue)
+    ? new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD' }).format(args.originalValue as number)
     : args.originalValue;
 
   return {
@@ -33,14 +29,14 @@ const App = () => {
   const pivotGridRef = useRef<PivotGridRef>(null);
 
   useEffect(() => {
-    pivotGridRef.current.instance().bindChart(chartRef.current.instance(), {
+    pivotGridRef.current?.instance().bindChart(chartRef.current?.instance(), {
       dataFieldsDisplayMode: 'splitPanes',
       alternateDataFields: false,
     });
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <Chart ref={chartRef}>
         <Size height={320} />
         <Tooltip enabled={true} customizeTooltip={customizeTooltip} />
@@ -62,7 +58,7 @@ const App = () => {
       >
         <FieldChooser enabled={true} height={400} />
       </PivotGrid>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/PivotGrid/ChartIntegration/ReactJs/App.js b/apps/demos/Demos/PivotGrid/ChartIntegration/ReactJs/App.js
index 6342a92318a6..5e3f55fa06a8 100644
--- a/apps/demos/Demos/PivotGrid/ChartIntegration/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/ChartIntegration/ReactJs/App.js
@@ -21,13 +21,13 @@ const App = () => {
   const chartRef = useRef(null);
   const pivotGridRef = useRef(null);
   useEffect(() => {
-    pivotGridRef.current.instance().bindChart(chartRef.current.instance(), {
+    pivotGridRef.current?.instance().bindChart(chartRef.current?.instance(), {
       dataFieldsDisplayMode: 'splitPanes',
       alternateDataFields: false,
     });
   }, []);
   return (
-    <React.Fragment>
+    <>
       <Chart ref={chartRef}>
         <Size height={320} />
         <Tooltip
@@ -55,7 +55,7 @@ const App = () => {
           height={400}
         />
       </PivotGrid>
-    </React.Fragment>
+    </>
   );
 };
 const dataSource = new PivotGridDataSource({
diff --git a/apps/demos/Demos/PivotGrid/Customization/React/App.tsx b/apps/demos/Demos/PivotGrid/Customization/React/App.tsx
index 10346dcd858f..f0ffa9b672f8 100644
--- a/apps/demos/Demos/PivotGrid/Customization/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/Customization/React/App.tsx
@@ -1,16 +1,21 @@
 import React, { useState } from 'react';
+
 import PivotGrid, { FieldChooser } from 'devextreme-react/pivot-grid';
 import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+
 import { sales } from './data.ts';
 
+type CheckBoxValue = CheckBoxTypes.Properties['value'];
+
 const App = () => {
-  const [showTotalsPrior, setShowTotalsPrior] = useState(false);
-  const [dataFieldArea, setDataFieldArea] = useState(false);
-  const [rowHeaderLayout, setRowHeaderLayout] = useState(true);
+  const [showTotalsPrior, setShowTotalsPrior] = useState<CheckBoxValue>(false);
+  const [dataFieldArea, setDataFieldArea] = useState<CheckBoxValue>(false);
+  const [rowHeaderLayout, setRowHeaderLayout] = useState<CheckBoxValue>(true);
 
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         id="sales"
         showTotalsPrior={showTotalsPrior ? 'both' : 'none'}
@@ -52,7 +57,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/PivotGrid/Customization/ReactJs/App.js b/apps/demos/Demos/PivotGrid/Customization/ReactJs/App.js
index f1a19865b4cb..f25998c0452a 100644
--- a/apps/demos/Demos/PivotGrid/Customization/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/Customization/ReactJs/App.js
@@ -9,7 +9,7 @@ const App = () => {
   const [dataFieldArea, setDataFieldArea] = useState(false);
   const [rowHeaderLayout, setRowHeaderLayout] = useState(true);
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         id="sales"
         showTotalsPrior={showTotalsPrior ? 'both' : 'none'}
@@ -51,7 +51,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 const dataSource = new PivotGridDataSource({
diff --git a/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx b/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
index 94f61b18eede..1ee1522e8074 100644
--- a/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
@@ -1,10 +1,12 @@
 import React, { useCallback, useRef, useState } from 'react';
+
 import {
   PivotGrid,
   FieldChooser,
   type PivotGridTypes,
 } from 'devextreme-react/pivot-grid';
-import { DataGrid, Column, DataGridRef } from 'devextreme-react/data-grid';
+import { DataGrid, Column } from 'devextreme-react/data-grid';
+import type { DataGridRef } from 'devextreme-react/data-grid';
 import { Popup } from 'devextreme-react/popup';
 import { DataSource } from 'devextreme-react/common/data';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
@@ -13,15 +15,15 @@ import { sales } from './data.ts';
 
 const App = () => {
   const [popupTitle, setPopupTitle] = useState('');
-  const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource>(null);
+  const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource | null>(null);
   const [popupVisible, setPopupVisible] = useState(false);
   const dataGridRef = useRef<DataGridRef>(null);
 
   const onCellClick = useCallback((e: PivotGridTypes.CellClickEvent) => {
-    if (e.area === 'data') {
+    if (e.area === 'data' && e.cell) {
       const pivotGridDataSource = e.component.getDataSource();
-      const rowPathLength = e.cell.rowPath.length;
-      const rowPathName = e.cell.rowPath[rowPathLength - 1];
+      const rowPathLength = e.cell.rowPath?.length ?? 0;
+      const rowPathName = e.cell.rowPath?.[rowPathLength - 1];
 
       setPopupTitle(`${rowPathName || 'Total'} Drill Down Data`);
       setDrillDownDataSource(pivotGridDataSource.createDrillDownDataSource(e.cell));
@@ -30,7 +32,7 @@ const App = () => {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         id="sales"
         allowSortingBySummary={true}
@@ -49,7 +51,7 @@ const App = () => {
         height={400}
         title={popupTitle}
         onHiding={() => setPopupVisible(false)}
-        onShown={() => dataGridRef.current.instance().updateDimensions()}
+        onShown={() => dataGridRef.current?.instance().updateDimensions()}
         showCloseButton={true}
       >
         <DataGrid
@@ -64,7 +66,7 @@ const App = () => {
           <Column dataField="date" dataType="date" />
         </DataGrid>
       </Popup>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js b/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js
index c82f6d4fb7de..3e3843d0882d 100644
--- a/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js
@@ -11,17 +11,17 @@ const App = () => {
   const [popupVisible, setPopupVisible] = useState(false);
   const dataGridRef = useRef(null);
   const onCellClick = useCallback((e) => {
-    if (e.area === 'data') {
+    if (e.area === 'data' && e.cell) {
       const pivotGridDataSource = e.component.getDataSource();
-      const rowPathLength = e.cell.rowPath.length;
-      const rowPathName = e.cell.rowPath[rowPathLength - 1];
+      const rowPathLength = e.cell.rowPath?.length ?? 0;
+      const rowPathName = e.cell.rowPath?.[rowPathLength - 1];
       setPopupTitle(`${rowPathName || 'Total'} Drill Down Data`);
       setDrillDownDataSource(pivotGridDataSource.createDrillDownDataSource(e.cell));
       setPopupVisible(true);
     }
   }, []);
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         id="sales"
         allowSortingBySummary={true}
@@ -40,7 +40,7 @@ const App = () => {
         height={400}
         title={popupTitle}
         onHiding={() => setPopupVisible(false)}
-        onShown={() => dataGridRef.current.instance().updateDimensions()}
+        onShown={() => dataGridRef.current?.instance().updateDimensions()}
         showCloseButton={true}
       >
         <DataGrid
@@ -62,7 +62,7 @@ const App = () => {
           />
         </DataGrid>
       </Popup>
-    </React.Fragment>
+    </>
   );
 };
 const dataSource = new PivotGridDataSource({
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx
index 0a6d954852d8..7ad96ab1faae 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx
@@ -11,6 +11,8 @@ import { saveAs } from 'file-saver-es';
 // Our demo infrastructure requires us to use 'file-saver-es'.
 // We recommend that you use the official 'file-saver' package in your applications.
 import { exportPivotGrid } from 'devextreme/excel_exporter';
+import type { PivotGridCell, ExcelExportPivotGridProps } from 'devextreme/excel_exporter';
+
 import { sales } from './data.ts';
 
 interface ConditionalAppearance {
@@ -19,6 +21,8 @@ interface ConditionalAppearance {
   bold?: boolean,
 }
 
+type CustomizeCellOptions = Parameters<Required<ExcelExportPivotGridProps>['customizeCell']>[0];
+
 const dataSource = new PivotGridDataSource({
   fields: [{
     caption: 'Region',
@@ -45,9 +49,13 @@ const dataSource = new PivotGridDataSource({
   store: sales,
 });
 
-const isDataCell = (cell) => cell.rowType === 'D' && cell.columnType === 'D';
+const isDataCell = (cell: PivotGridCell) => cell.rowType === 'D' && cell.columnType === 'D';
 
-const isTotalCell = (cell) => (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT');
+const isTotalCell = (cell: PivotGridCell) => (
+  cell.type === 'T' || cell.type === 'GT'
+  || cell.rowType === 'T' || cell.rowType === 'GT'
+  || cell.columnType === 'T' || cell.columnType === 'GT'
+);
 
 const getExcelCellFormat = ({ fill, font, bold }: ConditionalAppearance) =>
   ({
@@ -62,7 +70,7 @@ const getCssStyles = ({ fill, font, bold }: ConditionalAppearance) =>
     'font-weight': bold ? 'bold' : undefined,
   });
 
-const getConditionalAppearance = (cell): ConditionalAppearance => {
+const getConditionalAppearance = (cell: PivotGridCell): ConditionalAppearance => {
   if (isTotalCell(cell)) {
     return { fill: 'F2F2F2', font: '3F3F3F', bold: true };
   }
@@ -83,19 +91,21 @@ const onExporting = (e: PivotGridTypes.ExportingEvent) => {
   exportPivotGrid({
     component: e.component,
     worksheet,
-    customizeCell: ({ pivotCell, excelCell }) => {
-      if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
-        const appearance = getConditionalAppearance(pivotCell);
-        Object.assign(excelCell, getExcelCellFormat(appearance));
-      }
+    customizeCell: ({ pivotCell, excelCell }: CustomizeCellOptions) => {
+      if (pivotCell && excelCell) {
+        if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
+          const appearance = getConditionalAppearance(pivotCell);
+          Object.assign(excelCell, getExcelCellFormat(appearance));
+        }
 
-      const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
-      excelCell.border = {
-        bottom: borderStyle,
-        left: borderStyle,
-        right: borderStyle,
-        top: borderStyle,
-      };
+        const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
+        excelCell.border = {
+          bottom: borderStyle,
+          left: borderStyle,
+          right: borderStyle,
+          top: borderStyle,
+        };
+      }
     },
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer) => {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js
index 24e314e79bee..1753aa24a620 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js
@@ -75,17 +75,19 @@ const onExporting = (e) => {
     component: e.component,
     worksheet,
     customizeCell: ({ pivotCell, excelCell }) => {
-      if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
-        const appearance = getConditionalAppearance(pivotCell);
-        Object.assign(excelCell, getExcelCellFormat(appearance));
+      if (pivotCell && excelCell) {
+        if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
+          const appearance = getConditionalAppearance(pivotCell);
+          Object.assign(excelCell, getExcelCellFormat(appearance));
+        }
+        const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
+        excelCell.border = {
+          bottom: borderStyle,
+          left: borderStyle,
+          right: borderStyle,
+          top: borderStyle,
+        };
       }
-      const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
-      excelCell.border = {
-        bottom: borderStyle,
-        left: borderStyle,
-        right: borderStyle,
-        top: borderStyle,
-      };
     },
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer) => {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx
index c6c89e41dc05..718bb6ae22ec 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx
@@ -1,21 +1,21 @@
 import React, { useCallback, useState } from 'react';
 
-import PivotGrid, {
-  FieldChooser,
-  FieldPanel,
-  Export,
-  type PivotGridTypes,
-} from 'devextreme-react/pivot-grid';
+import PivotGrid, { FieldChooser, FieldPanel, Export } from 'devextreme-react/pivot-grid';
+import type { PivotGridTypes } from 'devextreme-react/pivot-grid';
 import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import { Workbook } from 'devextreme-exceljs-fork';
 import { saveAs } from 'file-saver-es';
 // Our demo infrastructure requires us to use 'file-saver-es'.
 // We recommend that you use the official 'file-saver' package in your applications.
 import { exportPivotGrid } from 'devextreme/excel_exporter';
+import type { CellRange } from 'devextreme/excel_exporter';
 
 import { sales } from './data.ts';
 
+type CheckBoxValue = CheckBoxTypes.Properties['value'];
+
 const dataSource = new PivotGridDataSource({
   fields: [{
     caption: 'Region',
@@ -50,10 +50,10 @@ const dataSource = new PivotGridDataSource({
 });
 
 const App = () => {
-  const [exportDataFieldHeaders, setExportDataFieldHeaders] = useState(false);
-  const [exportRowFieldHeaders, setExportRowFieldHeaders] = useState(false);
-  const [exportColumnFieldHeaders, setExportColumnFieldHeaders] = useState(false);
-  const [exportFilterFieldHeaders, setExportFilterFieldHeaders] = useState(false);
+  const [exportDataFieldHeaders, setExportDataFieldHeaders] = useState<CheckBoxValue>(false);
+  const [exportRowFieldHeaders, setExportRowFieldHeaders] = useState<CheckBoxValue>(false);
+  const [exportColumnFieldHeaders, setExportColumnFieldHeaders] = useState<CheckBoxValue>(false);
+  const [exportFilterFieldHeaders, setExportFilterFieldHeaders] = useState<CheckBoxValue>(false);
 
   const onExporting = useCallback((e: PivotGridTypes.ExportingEvent) => {
     const workbook = new Workbook();
@@ -68,11 +68,11 @@ const App = () => {
       worksheet,
       topLeftCell: { row: 4, column: 1 },
       keepColumnWidths: false,
-      exportDataFieldHeaders,
-      exportRowFieldHeaders,
-      exportColumnFieldHeaders,
-      exportFilterFieldHeaders,
-    }).then((cellRange) => {
+      exportDataFieldHeaders: !!exportDataFieldHeaders,
+      exportRowFieldHeaders: !!exportRowFieldHeaders,
+      exportColumnFieldHeaders: !!exportColumnFieldHeaders,
+      exportFilterFieldHeaders: !!exportFilterFieldHeaders,
+    }).then((cellRange: CellRange) => {
       // Header
       const headerRow = worksheet.getRow(2);
       const worksheetViews: any = worksheet.views;
@@ -89,8 +89,8 @@ const App = () => {
       headerCell.alignment = { horizontal: 'left', vertical: 'middle', wrapText: true };
 
       // Footer
-      const footerRowIndex = cellRange.to.row + 2;
-      const footerCell = worksheet.getRow(footerRowIndex).getCell(cellRange.to.column);
+      const footerRowIndex = (cellRange.to?.row ?? 0) + 2;
+      const footerCell = worksheet.getRow(footerRowIndex).getCell(cellRange.to?.column ?? 0);
       footerCell.value = 'www.wikipedia.org';
       footerCell.font = { color: { argb: 'BFBFBF' }, italic: true };
       footerCell.alignment = { horizontal: 'right' };
@@ -107,7 +107,7 @@ const App = () => {
   ]);
 
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Sales Amount by Region</h3>
       </div>
@@ -151,7 +151,7 @@ const App = () => {
             text="Export Filter Field Headers" />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js
index 68f9e220d571..fcfb14bfc35b 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js
@@ -69,10 +69,10 @@ const App = () => {
         worksheet,
         topLeftCell: { row: 4, column: 1 },
         keepColumnWidths: false,
-        exportDataFieldHeaders,
-        exportRowFieldHeaders,
-        exportColumnFieldHeaders,
-        exportFilterFieldHeaders,
+        exportDataFieldHeaders: !!exportDataFieldHeaders,
+        exportRowFieldHeaders: !!exportRowFieldHeaders,
+        exportColumnFieldHeaders: !!exportColumnFieldHeaders,
+        exportFilterFieldHeaders: !!exportFilterFieldHeaders,
       })
         .then((cellRange) => {
           // Header
@@ -87,8 +87,8 @@ const App = () => {
           headerCell.font = { name: 'Segoe UI Light', size: 22, bold: true };
           headerCell.alignment = { horizontal: 'left', vertical: 'middle', wrapText: true };
           // Footer
-          const footerRowIndex = cellRange.to.row + 2;
-          const footerCell = worksheet.getRow(footerRowIndex).getCell(cellRange.to.column);
+          const footerRowIndex = (cellRange.to?.row ?? 0) + 2;
+          const footerCell = worksheet.getRow(footerRowIndex).getCell(cellRange.to?.column ?? 0);
           footerCell.value = 'www.wikipedia.org';
           footerCell.font = { color: { argb: 'BFBFBF' }, italic: true };
           footerCell.alignment = { horizontal: 'right' };
@@ -107,7 +107,7 @@ const App = () => {
     ],
   );
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Sales Amount by Region</h3>
       </div>
@@ -159,7 +159,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts
index 8395b3a1b83a..e0bdfc93f679 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.ts
@@ -68,10 +68,8 @@ export class AppComponent {
   }
 
   contextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
-    type SourceField = (typeof e.field) & { index: number };
-
     const dataSource = e.component.getDataSource();
-    const sourceField = e.field as SourceField;
+    const sourceField = e.field;
 
     if (sourceField) {
       if (!sourceField.groupName || sourceField.groupIndex === 0) {
@@ -81,7 +79,7 @@ export class AppComponent {
             let fieldIndex;
 
             if (sourceField.groupName) {
-              fieldIndex = (dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex] as SourceField).index;
+              fieldIndex = (dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex]).index;
             } else {
               fieldIndex = sourceField.index;
             }
diff --git a/apps/demos/Demos/PivotGrid/FieldPanel/React/App.tsx b/apps/demos/Demos/PivotGrid/FieldPanel/React/App.tsx
index 842a0ec9ef1c..eac52cc9a5e3 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/React/App.tsx
@@ -1,16 +1,30 @@
 import React, { useState } from 'react';
 
-import PivotGrid, {
-  FieldChooser,
-  FieldPanel,
-} from 'devextreme-react/pivot-grid';
+import PivotGrid, { FieldChooser, FieldPanel } from 'devextreme-react/pivot-grid';
+import type { PivotGridTypes } from 'devextreme-react/pivot-grid';
 import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
+import type { ContextMenuTypes } from 'devextreme-react/context-menu';
 
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 
 import { sales } from './data.ts';
 
-const setSummaryType = (args, sourceField) => {
+type CheckBoxValue = CheckBoxTypes.Properties['value'];
+
+type FieldWithIndex = PivotGridTypes.ContextMenuPreparingEvent['field'] & {
+  index: number
+};
+
+type ContextMenuItem = ContextMenuTypes.Item & {
+  value?: string;
+  onItemClick?: (e: ContextMenuTypes.ItemClickEvent) => void;
+};
+
+const setSummaryType = (
+  args: ContextMenuTypes.ItemClickEvent,
+  sourceField: FieldWithIndex
+) => {
   dataSource.field(sourceField.index, {
     summaryType: args.itemData.value,
   });
@@ -18,17 +32,17 @@ const setSummaryType = (args, sourceField) => {
   dataSource.load();
 };
 
-const onContextMenuPreparing = (e) => {
-  const sourceField = e.field;
+const onContextMenuPreparing = (e: PivotGridTypes.ContextMenuPreparingEvent) => {
+  const sourceField = e.field as FieldWithIndex;
 
-  if (sourceField) {
+  if (sourceField && e.items) {
     if (!sourceField.groupName || sourceField.groupIndex === 0) {
       e.items.push({
         text: 'Hide field',
         onItemClick() {
           let fieldIndex: number;
 
-          if (sourceField.groupName) {
+          if (sourceField.groupName && sourceField.area !== undefined && sourceField.areaIndex !== undefined) {
             const areaField: any = dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex];
 
             fieldIndex = areaField.index;
@@ -45,7 +59,7 @@ const onContextMenuPreparing = (e) => {
     }
 
     if (sourceField.dataType === 'number') {
-      const menuItems = [];
+      const menuItems: ContextMenuItem[] = [];
 
       e.items.push({ text: 'Summary Type', items: menuItems });
       ['Sum', 'Avg', 'Min', 'Max'].forEach((summaryType) => {
@@ -54,10 +68,10 @@ const onContextMenuPreparing = (e) => {
         menuItems.push({
           text: summaryType,
           value: summaryType.toLowerCase(),
-          onItemClick(args) {
+          onItemClick(args: ContextMenuTypes.ItemClickEvent) {
             setSummaryType(args, sourceField);
           },
-          selected: e.field.summaryType === summaryTypeValue,
+          selected: e.field?.summaryType === summaryTypeValue,
         });
       });
     }
@@ -65,13 +79,13 @@ const onContextMenuPreparing = (e) => {
 };
 
 const App = () => {
-  const [showColumnFields, setShowColumnFields] = useState(true);
-  const [showDataFields, setShowDataFields] = useState(true);
-  const [showFilterFields, setShowFilterFields] = useState(true);
-  const [showRowFields, setShowRowFields] = useState(true);
+  const [showColumnFields, setShowColumnFields] = useState<CheckBoxValue>(true);
+  const [showDataFields, setShowDataFields] = useState<CheckBoxValue>(true);
+  const [showFilterFields, setShowFilterFields] = useState<CheckBoxValue>(true);
+  const [showRowFields, setShowRowFields] = useState<CheckBoxValue>(true);
 
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         id="sales"
         dataSource={dataSource}
@@ -83,10 +97,10 @@ const App = () => {
         onContextMenuPreparing={onContextMenuPreparing}
       >
         <FieldPanel
-          showColumnFields={showColumnFields}
-          showDataFields={showDataFields}
-          showFilterFields={showFilterFields}
-          showRowFields={showRowFields}
+          showColumnFields={!!showColumnFields}
+          showDataFields={!!showDataFields}
+          showFilterFields={!!showFilterFields}
+          showRowFields={!!showRowFields}
           allowFieldDragging={true}
           visible={true}
         />
@@ -122,7 +136,7 @@ const App = () => {
             text="Show Filter Fields" />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/PivotGrid/FieldPanel/ReactJs/App.js b/apps/demos/Demos/PivotGrid/FieldPanel/ReactJs/App.js
index fa1f7af4b833..6a78223f63b7 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/ReactJs/App.js
@@ -12,13 +12,17 @@ const setSummaryType = (args, sourceField) => {
 };
 const onContextMenuPreparing = (e) => {
   const sourceField = e.field;
-  if (sourceField) {
+  if (sourceField && e.items) {
     if (!sourceField.groupName || sourceField.groupIndex === 0) {
       e.items.push({
         text: 'Hide field',
         onItemClick() {
           let fieldIndex;
-          if (sourceField.groupName) {
+          if (
+            sourceField.groupName &&
+            sourceField.area !== undefined &&
+            sourceField.areaIndex !== undefined
+          ) {
             const areaField = dataSource.getAreaFields(sourceField.area, true)[
               sourceField.areaIndex
             ];
@@ -44,7 +48,7 @@ const onContextMenuPreparing = (e) => {
           onItemClick(args) {
             setSummaryType(args, sourceField);
           },
-          selected: e.field.summaryType === summaryTypeValue,
+          selected: e.field?.summaryType === summaryTypeValue,
         });
       });
     }
@@ -56,7 +60,7 @@ const App = () => {
   const [showFilterFields, setShowFilterFields] = useState(true);
   const [showRowFields, setShowRowFields] = useState(true);
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         id="sales"
         dataSource={dataSource}
@@ -68,10 +72,10 @@ const App = () => {
         onContextMenuPreparing={onContextMenuPreparing}
       >
         <FieldPanel
-          showColumnFields={showColumnFields}
-          showDataFields={showDataFields}
-          showFilterFields={showFilterFields}
-          showRowFields={showRowFields}
+          showColumnFields={!!showColumnFields}
+          showDataFields={!!showDataFields}
+          showFilterFields={!!showFilterFields}
+          showRowFields={!!showRowFields}
           allowFieldDragging={true}
           visible={true}
         />
@@ -115,7 +119,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 const dataSource = new PivotGridDataSource({
diff --git a/apps/demos/Demos/PivotGrid/Filtering/React/App.tsx b/apps/demos/Demos/PivotGrid/Filtering/React/App.tsx
index 4484c3403cb4..592925583497 100644
--- a/apps/demos/Demos/PivotGrid/Filtering/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/Filtering/React/App.tsx
@@ -3,10 +3,13 @@ import {
   PivotGrid, HeaderFilter, Search, FieldChooser, FieldPanel,
 } from 'devextreme-react/pivot-grid';
 import { CheckBox } from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 
+type CheckBoxValue = CheckBoxTypes.Properties['value'];
+
 const dataSource = new PivotGridDataSource({
   fields: [
     { dataField: '[Product].[Category]', area: 'column' },
@@ -32,8 +35,8 @@ const dataSource = new PivotGridDataSource({
 });
 
 const App = () => {
-  const [searchEnabled, setSearchEnabled] = useState(true);
-  const [showRelevantValues, setShowRelevantValues] = useState(true);
+  const [searchEnabled, setSearchEnabled] = useState<CheckBoxValue>(true);
+  const [showRelevantValues, setShowRelevantValues] = useState<CheckBoxValue>(true);
 
   return (
     <div>
@@ -47,11 +50,11 @@ const App = () => {
         dataSource={dataSource}
       >
         <HeaderFilter
-          showRelevantValues={showRelevantValues}
+          showRelevantValues={!!showRelevantValues}
           width={300}
           height={400}
         >
-          <Search enabled={searchEnabled} />
+          <Search enabled={!!searchEnabled} />
         </HeaderFilter>
         <FieldChooser allowSearch={true} />
         <FieldPanel visible={true} />
diff --git a/apps/demos/Demos/PivotGrid/Filtering/ReactJs/App.js b/apps/demos/Demos/PivotGrid/Filtering/ReactJs/App.js
index 937730f6c1cc..91c0cd747e5c 100644
--- a/apps/demos/Demos/PivotGrid/Filtering/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/Filtering/ReactJs/App.js
@@ -48,11 +48,11 @@ const App = () => {
         dataSource={dataSource}
       >
         <HeaderFilter
-          showRelevantValues={showRelevantValues}
+          showRelevantValues={!!showRelevantValues}
           width={300}
           height={400}
         >
-          <Search enabled={searchEnabled} />
+          <Search enabled={!!searchEnabled} />
         </HeaderFilter>
         <FieldChooser allowSearch={true} />
         <FieldPanel visible={true} />
diff --git a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/React/App.tsx b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/React/App.tsx
index 6e52c53b0b10..cc8aae809093 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/React/App.tsx
@@ -14,7 +14,7 @@ const App = () => {
   const [applyChangesMode, setApplyChangesMode] = useState<'instantly' | 'onDemand'>('instantly');
 
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         dataSource={dataSource}
         allowSortingBySummary={true}
@@ -41,7 +41,7 @@ const App = () => {
           </SelectBox>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/ReactJs/App.js b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/ReactJs/App.js
index b1a3ff7c747b..4070c792563a 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/ReactJs/App.js
@@ -7,7 +7,7 @@ const applyChangesModeLabel = { 'aria-label': 'Apply Changes Mode' };
 const App = () => {
   const [applyChangesMode, setApplyChangesMode] = useState('instantly');
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         dataSource={dataSource}
         allowSortingBySummary={true}
@@ -35,7 +35,7 @@ const App = () => {
           ></SelectBox>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 const dataSource = new PivotGridDataSource({
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx
index e15577f69718..e03ccbac07d4 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx
@@ -8,7 +8,7 @@ import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 
 const App = () => (
-  <React.Fragment>
+  <>
     <div className="long-title">
       <h3>Sales Statistics</h3>
     </div>
@@ -23,7 +23,7 @@ const App = () => (
     >
       <FieldChooser enabled={true} allowSearch={true} />
     </PivotGrid>
-  </React.Fragment>
+  </>
 );
 
 const dataSource = new PivotGridDataSource({
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js
index 12b59058c7e3..db03b1d78bc0 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js
@@ -4,7 +4,7 @@ import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 
 const App = () => (
-  <React.Fragment>
+  <>
     <div className="long-title">
       <h3>Sales Statistics</h3>
     </div>
@@ -22,7 +22,7 @@ const App = () => (
         allowSearch={true}
       />
     </PivotGrid>
-  </React.Fragment>
+  </>
 );
 const dataSource = new PivotGridDataSource({
   fields: [
diff --git a/apps/demos/Demos/PivotGrid/Overview/React/App.tsx b/apps/demos/Demos/PivotGrid/Overview/React/App.tsx
index 9c391c3c9dca..e380ebbeae98 100644
--- a/apps/demos/Demos/PivotGrid/Overview/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/Overview/React/App.tsx
@@ -1,19 +1,15 @@
 import React, { useEffect, useRef } from 'react';
 
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
-
 import Chart, {
   AdaptiveLayout,
   CommonSeriesSettings,
   Size,
   Tooltip,
-  ChartRef,
 } from 'devextreme-react/chart';
-
-import PivotGrid, {
-  FieldChooser,
-  PivotGridRef,
-} from 'devextreme-react/pivot-grid';
+import type { ChartRef, ChartTypes } from 'devextreme-react/chart';
+import PivotGrid, { FieldChooser } from 'devextreme-react/pivot-grid';
+import type { PivotGridRef } from 'devextreme-react/pivot-grid';
 
 import { sales } from './data.ts';
 
@@ -23,8 +19,8 @@ const currencyFormatter = new Intl.NumberFormat('en-US', {
   minimumFractionDigits: 0,
 });
 
-const customizeTooltip = (args) => {
-  const valueText = currencyFormatter.format(args.originalValue);
+const customizeTooltip = (args: ChartTypes.CommonPointInfo) => {
+  const valueText = currencyFormatter.format(args.originalValue as number);
   return {
     html: `${args.seriesName} | Total<div class="currency">${valueText}</div>`,
   };
@@ -72,7 +68,7 @@ const App = () => {
   const pivotGridRef = useRef<PivotGridRef>(null);
 
   useEffect(() => {
-    pivotGridRef.current.instance().bindChart(chartRef.current.instance(), {
+    pivotGridRef.current?.instance().bindChart(chartRef.current?.instance(), {
       dataFieldsDisplayMode: 'splitPanes',
       alternateDataFields: false,
     });
@@ -83,7 +79,7 @@ const App = () => {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <Chart ref={chartRef}>
         <Size height={200} />
         <Tooltip enabled={true} customizeTooltip={customizeTooltip} />
@@ -105,7 +101,7 @@ const App = () => {
       >
         <FieldChooser enabled={true} height={400} />
       </PivotGrid>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/PivotGrid/Overview/ReactJs/App.js b/apps/demos/Demos/PivotGrid/Overview/ReactJs/App.js
index 6d47829c987d..bb31c6bed830 100644
--- a/apps/demos/Demos/PivotGrid/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/Overview/ReactJs/App.js
@@ -57,7 +57,7 @@ const App = () => {
   const chartRef = useRef(null);
   const pivotGridRef = useRef(null);
   useEffect(() => {
-    pivotGridRef.current.instance().bindChart(chartRef.current.instance(), {
+    pivotGridRef.current?.instance().bindChart(chartRef.current?.instance(), {
       dataFieldsDisplayMode: 'splitPanes',
       alternateDataFields: false,
     });
@@ -67,7 +67,7 @@ const App = () => {
     });
   }, []);
   return (
-    <React.Fragment>
+    <>
       <Chart ref={chartRef}>
         <Size height={200} />
         <Tooltip
@@ -95,7 +95,7 @@ const App = () => {
           height={400}
         />
       </PivotGrid>
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx
index be4ac74fc3ce..7cc10b378e87 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx
@@ -12,7 +12,7 @@ import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 
 const App = () => (
-  <React.Fragment>
+  <>
     <div className="long-title">
       <h3>Sales Statistics</h3>
     </div>
@@ -30,7 +30,7 @@ const App = () => (
       </HeaderFilter>
       <Scrolling mode="virtual" />
     </PivotGrid>
-  </React.Fragment>
+  </>
 );
 
 const dataSource = new PivotGridDataSource({
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js
index 3ba8171d9750..e91a7203eeb8 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js
@@ -10,7 +10,7 @@ import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 
 const App = () => (
-  <React.Fragment>
+  <>
     <div className="long-title">
       <h3>Sales Statistics</h3>
     </div>
@@ -31,7 +31,7 @@ const App = () => (
       </HeaderFilter>
       <Scrolling mode="virtual" />
     </PivotGrid>
-  </React.Fragment>
+  </>
 );
 const dataSource = new PivotGridDataSource({
   paginate: true,
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx b/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx
index b623c2c28331..b794c84a6634 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
 
-import PivotGrid, {
-  FieldChooser,
-} from 'devextreme-react/pivot-grid';
+import PivotGrid, { FieldChooser } from 'devextreme-react/pivot-grid';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 
 import { sales } from './data.ts';
+import type { Sale } from './data.ts';
 
 const App = () => (
-  <React.Fragment>
+  <>
     <div className="long-title">
       <h3>Sales Amount by Region</h3>
     </div>
@@ -24,7 +23,7 @@ const App = () => (
     >
       <FieldChooser enabled={false} />
     </PivotGrid>
-  </React.Fragment>
+  </>
 );
 
 const dataSource = new PivotGridDataSource({
@@ -38,7 +37,7 @@ const dataSource = new PivotGridDataSource({
     dataField: 'city',
     width: 150,
     area: 'row',
-    selector(data) {
+    selector(data: Sale) {
       return `${data.city} (${data.country})`;
     },
   }, {
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js
index 76b0b67d2c38..a36fc6e7e654 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js
@@ -4,7 +4,7 @@ import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import { sales } from './data.js';
 
 const App = () => (
-  <React.Fragment>
+  <>
     <div className="long-title">
       <h3>Sales Amount by Region</h3>
     </div>
@@ -20,7 +20,7 @@ const App = () => (
     >
       <FieldChooser enabled={false} />
     </PivotGrid>
-  </React.Fragment>
+  </>
 );
 const dataSource = new PivotGridDataSource({
   fields: [
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx
index 9943bf2f7bcc..1c55eea8e87a 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx
@@ -1,33 +1,16 @@
 import React, { useRef, useState } from 'react';
 
-import {
-  PivotGrid,
-  FieldChooser,
-} from 'devextreme-react/pivot-grid';
-
-import {
-  PivotGridFieldChooser,
-  Texts,
-  PivotGridFieldChooserRef,
-} from 'devextreme-react/pivot-grid-field-chooser';
-
-import {
-  SelectBox,
-} from 'devextreme-react/select-box';
-
-import {
-  Button,
-} from 'devextreme-react/button';
-
-import {
-  RadioGroup,
-} from 'devextreme-react/radio-group';
+import { Button } from 'devextreme-react/button';
+import type { ApplyChangesMode } from 'devextreme-react/common/grids';
+import type { FieldChooserLayout } from 'devextreme-react/common';
+import { PivotGrid, FieldChooser } from 'devextreme-react/pivot-grid';
+import { PivotGridFieldChooser, Texts } from 'devextreme-react/pivot-grid-field-chooser';
+import type { PivotGridFieldChooserRef } from 'devextreme-react/pivot-grid-field-chooser';
+import { RadioGroup } from 'devextreme-react/radio-group';
+import { SelectBox } from 'devextreme-react/select-box';
 
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 
-import { ApplyChangesMode } from 'devextreme-react/common/grids';
-import { FieldChooserLayout } from 'devextreme-react/common';
-
 import service from './data.ts';
 
 const applyChangesModeLabel = { 'aria-label': 'Apply Changes Mode' };
@@ -40,7 +23,7 @@ const App = () => {
   const fieldChooserRef = useRef<PivotGridFieldChooserRef>(null);
 
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         dataSource={dataSource}
         allowSortingBySummary={true}
@@ -73,11 +56,11 @@ const App = () => {
             <Button
               text="Apply"
               type="default"
-              onClick={() => fieldChooserRef.current.instance().applyChanges()}
+              onClick={() => fieldChooserRef.current?.instance().applyChanges()}
             ></Button>
             <Button
               text="Cancel"
-              onClick={() => fieldChooserRef.current.instance().cancelChanges()}
+              onClick={() => fieldChooserRef.current?.instance().cancelChanges()}
             ></Button>
           </div>
         }
@@ -111,7 +94,7 @@ const App = () => {
 
       </div>
 
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/App.js b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/App.js
index 1f6318631856..63f5a1640a62 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/App.js
@@ -1,9 +1,9 @@
 import React, { useRef, useState } from 'react';
+import { Button } from 'devextreme-react/button';
 import { PivotGrid, FieldChooser } from 'devextreme-react/pivot-grid';
 import { PivotGridFieldChooser, Texts } from 'devextreme-react/pivot-grid-field-chooser';
-import { SelectBox } from 'devextreme-react/select-box';
-import { Button } from 'devextreme-react/button';
 import { RadioGroup } from 'devextreme-react/radio-group';
+import { SelectBox } from 'devextreme-react/select-box';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import service from './data.js';
 
@@ -15,7 +15,7 @@ const App = () => {
   const [layout, setLayout] = useState(0);
   const fieldChooserRef = useRef(null);
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         dataSource={dataSource}
         allowSortingBySummary={true}
@@ -48,11 +48,11 @@ const App = () => {
             <Button
               text="Apply"
               type="default"
-              onClick={() => fieldChooserRef.current.instance().applyChanges()}
+              onClick={() => fieldChooserRef.current?.instance().applyChanges()}
             ></Button>
             <Button
               text="Cancel"
-              onClick={() => fieldChooserRef.current.instance().cancelChanges()}
+              onClick={() => fieldChooserRef.current?.instance().cancelChanges()}
             ></Button>
           </div>
         )}
@@ -84,7 +84,7 @@ const App = () => {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 const dataSource = new PivotGridDataSource({
diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/React/App.tsx b/apps/demos/Demos/PivotGrid/StatePersistence/React/App.tsx
index e6b57c5e77e6..5fb5092506b5 100644
--- a/apps/demos/Demos/PivotGrid/StatePersistence/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/StatePersistence/React/App.tsx
@@ -5,12 +5,23 @@ import PivotGrid, {
   FieldPanel,
   StateStoring,
 } from 'devextreme-react/pivot-grid';
+import type { PivotGridTypes } from 'devextreme-react/pivot-grid';
 import Button from 'devextreme-react/button';
+import type { ContextMenuTypes } from 'devextreme-react/context-menu';
 
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 
 import { sales } from './data.ts';
 
+type FieldWithIndex = PivotGridTypes.ContextMenuPreparingEvent['field'] & {
+  index: number
+};
+
+type ContextMenuItem = ContextMenuTypes.Item & {
+  value?: string;
+  onItemClick?: (e: ContextMenuTypes.ItemClickEvent) => void;
+};
+
 const onRefreshClick = () => {
   window.location.reload();
 };
@@ -19,17 +30,17 @@ const onResetClick = () => {
   dataSource.state({});
 };
 
-const onContextMenuPreparing = (e) => {
-  const sourceField = e.field;
+const onContextMenuPreparing = (e: PivotGridTypes.ContextMenuPreparingEvent) => {
+  const sourceField = e.field as FieldWithIndex;
 
-  if (sourceField) {
+  if (sourceField && e.items) {
     if (!sourceField.groupName || sourceField.groupIndex === 0) {
       e.items.push({
         text: 'Hide field',
         onItemClick() {
           let fieldIndex: number;
 
-          if (sourceField.groupName) {
+          if (sourceField.groupName && sourceField.area !== undefined && sourceField.areaIndex !== undefined) {
             const areaField: any = dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex];
 
             fieldIndex = areaField.index;
@@ -46,7 +57,7 @@ const onContextMenuPreparing = (e) => {
     }
 
     if (sourceField.dataType === 'number') {
-      const menuItems = [];
+      const menuItems: ContextMenuItem[] = [];
 
       e.items.push({ text: 'Summary Type', items: menuItems });
 
@@ -56,10 +67,10 @@ const onContextMenuPreparing = (e) => {
         menuItems.push({
           text: summaryType,
           value: summaryType.toLowerCase(),
-          onItemClick(args) {
+          onItemClick(args: ContextMenuTypes.ItemClickEvent) {
             setSummaryType(args, sourceField);
           },
-          selected: e.field.summaryType === summaryTypeValue,
+          selected: e.field?.summaryType === summaryTypeValue,
         });
       });
     }
@@ -98,7 +109,10 @@ const dataSource = new PivotGridDataSource({
   store: sales,
 });
 
-const setSummaryType = (args, sourceField) => {
+const setSummaryType = (
+  args: ContextMenuTypes.ItemClickEvent,
+  sourceField: FieldWithIndex,
+) => {
   dataSource.field(sourceField.index, {
     summaryType: args.itemData.value,
   });
@@ -107,7 +121,7 @@ const setSummaryType = (args, sourceField) => {
 };
 
 const App = () => (
-  <React.Fragment>
+  <>
     <div id="pivotgrid-demo">
       <div className="desc-container">Expand, filter, sort and perform other operations
         on&nbsp;the PivotGrid&rsquo;s columns and
@@ -140,7 +154,7 @@ const App = () => (
         <FieldChooser enabled={true} />
       </PivotGrid>
     </div>
-  </React.Fragment>
+  </>
 );
 
 export default App;
diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/App.js b/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/App.js
index 51083c66402c..2d71fab87dce 100644
--- a/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/App.js
@@ -12,13 +12,17 @@ const onResetClick = () => {
 };
 const onContextMenuPreparing = (e) => {
   const sourceField = e.field;
-  if (sourceField) {
+  if (sourceField && e.items) {
     if (!sourceField.groupName || sourceField.groupIndex === 0) {
       e.items.push({
         text: 'Hide field',
         onItemClick() {
           let fieldIndex;
-          if (sourceField.groupName) {
+          if (
+            sourceField.groupName &&
+            sourceField.area !== undefined &&
+            sourceField.areaIndex !== undefined
+          ) {
             const areaField = dataSource.getAreaFields(sourceField.area, true)[
               sourceField.areaIndex
             ];
@@ -44,7 +48,7 @@ const onContextMenuPreparing = (e) => {
           onItemClick(args) {
             setSummaryType(args, sourceField);
           },
-          selected: e.field.summaryType === summaryTypeValue,
+          selected: e.field?.summaryType === summaryTypeValue,
         });
       });
     }
@@ -95,7 +99,7 @@ const setSummaryType = (args, sourceField) => {
   dataSource.load();
 };
 const App = () => (
-  <React.Fragment>
+  <>
     <div id="pivotgrid-demo">
       <div className="desc-container">
         Expand, filter, sort and perform other operations on&nbsp;the PivotGrid&rsquo;s columns and
@@ -126,6 +130,6 @@ const App = () => (
         <FieldChooser enabled={true} />
       </PivotGrid>
     </div>
-  </React.Fragment>
+  </>
 );
 export default App;
diff --git a/apps/demos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts
index f5af50bbb144..e27e5d961685 100644
--- a/apps/demos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/SummaryDisplayModes/Angular/app/app.component.ts
@@ -71,8 +71,6 @@ export class AppComponent {
   }
 
   prepareContextMenu(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
-    type SourceField = (typeof e.field) & { index: number };
-
     if (e.field && e.field.dataField === 'amount') {
       this.summaryDisplayModes.forEach((mode) => {
         e.items.push({
@@ -86,7 +84,7 @@ export class AppComponent {
                             || mode.value === 'absoluteVariation') {
               format = 'currency';
             }
-            this.pivotGridDataSource.field((e.field as SourceField).index, {
+            this.pivotGridDataSource.field(e.field.index, {
               summaryDisplayMode: mode.value,
               format,
               caption,
diff --git a/apps/demos/Demos/PivotGrid/SummaryDisplayModes/React/App.tsx b/apps/demos/Demos/PivotGrid/SummaryDisplayModes/React/App.tsx
index 169c8e924633..7843af63e11d 100644
--- a/apps/demos/Demos/PivotGrid/SummaryDisplayModes/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/SummaryDisplayModes/React/App.tsx
@@ -1,35 +1,39 @@
 import React from 'react';
 
-import PivotGrid, {
-  FieldChooser,
-  FieldPanel,
-} from 'devextreme-react/pivot-grid';
+import PivotGrid, { FieldChooser, FieldPanel } from 'devextreme-react/pivot-grid';
+import type { PivotGridTypes } from 'devextreme-react/pivot-grid';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 
 import { sales } from './data.ts';
 
-const onContextMenuPreparing = (e) => {
-  if (e.field && e.field.dataField === 'amount') {
+type FieldWithIndex = PivotGridTypes.ContextMenuPreparingEvent['field'] & {
+  index: number
+};
+
+const onContextMenuPreparing = (e: PivotGridTypes.ContextMenuPreparingEvent) => {
+  if (e.field?.dataField === 'amount') {
     summaryDisplayModes.forEach((mode) => {
-      e.items.push({
-        text: mode.text,
-        selected: e.field.summaryDisplayMode === mode.value,
-        onItemClick: () => {
-          let format: string;
+      if (e.items) {
+        e.items.push({
+          text: mode.text,
+          selected: e.field?.summaryDisplayMode === mode.value,
+          onItemClick: () => {
+            let format: string | undefined;
 
-          const caption = mode.value === 'none' ? 'Total Sales' : 'Relative Sales';
-          if (mode.value === 'none' || mode.value === 'absoluteVariation') {
-            format = 'currency';
-          }
-          dataSource.field(e.field.index, {
-            summaryDisplayMode: mode.value,
-            format,
-            caption,
-          });
+            const caption = mode.value === 'none' ? 'Total Sales' : 'Relative Sales';
+            if (mode.value === 'none' || mode.value === 'absoluteVariation') {
+              format = 'currency';
+            }
+            dataSource.field((e.field as FieldWithIndex)?.index, {
+              summaryDisplayMode: mode.value,
+              format,
+              caption,
+            });
 
-          dataSource.load();
-        },
-      });
+            dataSource.load();
+          },
+        });
+      }
     });
   }
 };
@@ -83,7 +87,7 @@ const dataSource = new PivotGridDataSource({
 
 const App = () =>
   (
-    <React.Fragment>
+    <>
       <div className="desc-container">
         Right-click (or&nbsp;touch and hold) the &quot;Relative Sales&quot; field
         and select an&nbsp;item from the appeared context menu to&nbsp;change the
@@ -101,7 +105,7 @@ const App = () =>
         <FieldPanel showFilterFields={false} allowFieldDragging={false} visible={true} />
         <FieldChooser enabled={false} />
       </PivotGrid>
-    </React.Fragment>
+    </>
   );
 
 export default App;
diff --git a/apps/demos/Demos/PivotGrid/SummaryDisplayModes/ReactJs/App.js b/apps/demos/Demos/PivotGrid/SummaryDisplayModes/ReactJs/App.js
index 285f7c48c3b5..3ac5e61ba469 100644
--- a/apps/demos/Demos/PivotGrid/SummaryDisplayModes/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/SummaryDisplayModes/ReactJs/App.js
@@ -4,25 +4,27 @@ import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import { sales } from './data.js';
 
 const onContextMenuPreparing = (e) => {
-  if (e.field && e.field.dataField === 'amount') {
+  if (e.field?.dataField === 'amount') {
     summaryDisplayModes.forEach((mode) => {
-      e.items.push({
-        text: mode.text,
-        selected: e.field.summaryDisplayMode === mode.value,
-        onItemClick: () => {
-          let format;
-          const caption = mode.value === 'none' ? 'Total Sales' : 'Relative Sales';
-          if (mode.value === 'none' || mode.value === 'absoluteVariation') {
-            format = 'currency';
-          }
-          dataSource.field(e.field.index, {
-            summaryDisplayMode: mode.value,
-            format,
-            caption,
-          });
-          dataSource.load();
-        },
-      });
+      if (e.items) {
+        e.items.push({
+          text: mode.text,
+          selected: e.field?.summaryDisplayMode === mode.value,
+          onItemClick: () => {
+            let format;
+            const caption = mode.value === 'none' ? 'Total Sales' : 'Relative Sales';
+            if (mode.value === 'none' || mode.value === 'absoluteVariation') {
+              format = 'currency';
+            }
+            dataSource.field(e.field?.index, {
+              summaryDisplayMode: mode.value,
+              format,
+              caption,
+            });
+            dataSource.load();
+          },
+        });
+      }
     });
   }
 };
@@ -72,7 +74,7 @@ const dataSource = new PivotGridDataSource({
   store: sales,
 });
 const App = () => (
-  <React.Fragment>
+  <>
     <div className="desc-container">
       Right-click (or&nbsp;touch and hold) the &quot;Relative Sales&quot; field and select
       an&nbsp;item from the appeared context menu to&nbsp;change the
@@ -94,6 +96,6 @@ const App = () => (
       />
       <FieldChooser enabled={false} />
     </PivotGrid>
-  </React.Fragment>
+  </>
 );
 export default App;
diff --git a/apps/demos/tsconfig.react-check.json b/apps/demos/tsconfig.react-check.json
index 48e9619831c2..6c0aac0bac0d 100644
--- a/apps/demos/tsconfig.react-check.json
+++ b/apps/demos/tsconfig.react-check.json
@@ -37,6 +37,8 @@
     "Demos/TreeList/**/React/**/*.tsx",
     "Demos/DataGrid/**/React/**/*.ts",
     "Demos/DataGrid/**/React/**/*.tsx",
+    "Demos/PivotGrid/**/React/**/*.ts",
+    "Demos/PivotGrid/**/React/**/*.tsx",
     "Demos/Accordion/**/React/**/*.ts",
     "Demos/Accordion/**/React/**/*.tsx",
     "Demos/ActionSheet/**/React/**/*.ts",