diff --git a/package-lock.json b/package-lock.json
index 56e426862d..57aca1f9b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@babel/preset-react": "^7.16.7",
         "@types/formidable": "^2.0.4",
         "@types/node": "=14.17.15",
-        "@types/react": "^18.0.11",
+        "@types/react": "^18.0.12",
         "@types/react-dom": "^18.0.5",
         "@types/resize-observer-browser": "^0.1.7",
         "@types/xml2js": "^0.4.9",
@@ -53,7 +53,7 @@
         "react-dom": "^18.1.0",
         "rimraf": "^3.0.2",
         "socksv5": "0.0.6",
-        "typescript": "^4.7.2",
+        "typescript": "^4.7.3",
         "vite": "^2.9.9",
         "ws": "^8.5.0",
         "xml2js": "^0.4.23",
@@ -1287,9 +1287,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.0.11",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.11.tgz",
-      "integrity": "sha512-JxSwm54IgMW4XTR+zFF5QpNx4JITmFbB4WHR2J0vg9RpjNeyqEMlODXsD2e64br6GX70TL0UYjZJETpyyC1WdA==",
+      "version": "18.0.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz",
+      "integrity": "sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -5920,9 +5920,9 @@
       "dev": true
     },
     "node_modules/typescript": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.2.tgz",
-      "integrity": "sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
+      "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -7574,9 +7574,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "18.0.11",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.11.tgz",
-      "integrity": "sha512-JxSwm54IgMW4XTR+zFF5QpNx4JITmFbB4WHR2J0vg9RpjNeyqEMlODXsD2e64br6GX70TL0UYjZJETpyyC1WdA==",
+      "version": "18.0.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz",
+      "integrity": "sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
@@ -11000,9 +11000,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.2.tgz",
-      "integrity": "sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
+      "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
       "dev": true
     },
     "universalify": {
diff --git a/package.json b/package.json
index a7b0507105..8cbaad4340 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "@babel/preset-react": "^7.16.7",
     "@types/formidable": "^2.0.4",
     "@types/node": "=14.17.15",
-    "@types/react": "^18.0.11",
+    "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
     "@types/resize-observer-browser": "^0.1.7",
     "@types/xml2js": "^0.4.9",
@@ -87,7 +87,7 @@
     "react-dom": "^18.1.0",
     "rimraf": "^3.0.2",
     "socksv5": "0.0.6",
-    "typescript": "^4.7.2",
+    "typescript": "^4.7.3",
     "vite": "^2.9.9",
     "ws": "^8.5.0",
     "xml2js": "^0.4.23",
diff --git a/packages/html-reporter/src/chip.spec.tsx b/packages/html-reporter/src/chip.spec.tsx
index 4306a5182f..b46de93495 100644
--- a/packages/html-reporter/src/chip.spec.tsx
+++ b/packages/html-reporter/src/chip.spec.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { expect, test } from '@playwright/experimental-ct-react';
 import { AutoChip, Chip as LocalChip } from './chip';
 
diff --git a/packages/html-reporter/src/headerView.spec.tsx b/packages/html-reporter/src/headerView.spec.tsx
index 12ac7b903c..363d3aebea 100644
--- a/packages/html-reporter/src/headerView.spec.tsx
+++ b/packages/html-reporter/src/headerView.spec.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import { HeaderView } from './headerView';
 
diff --git a/packages/html-reporter/src/headerView.tsx b/packages/html-reporter/src/headerView.tsx
index 9eb45b029b..d97901be70 100644
--- a/packages/html-reporter/src/headerView.tsx
+++ b/packages/html-reporter/src/headerView.tsx
@@ -23,11 +23,11 @@ import * as icons from './icons';
 import { Link, navigate } from './links';
 import { statusIcon } from './statusIcon';
 
-export const HeaderView: React.FC<{
+export const HeaderView: React.FC<React.PropsWithChildren<{
   stats: Stats,
   filterText: string,
   setFilterText: (filterText: string) => void,
-}> = ({ stats, filterText, setFilterText }) => {
+}>> = ({ stats, filterText, setFilterText }) => {
   React.useEffect(() => {
     (async () => {
       window.addEventListener('popstate', () => {
diff --git a/packages/html-reporter/src/icons.tsx b/packages/html-reporter/src/icons.tsx
index a5ebcb0898..292954049a 100644
--- a/packages/html-reporter/src/icons.tsx
+++ b/packages/html-reporter/src/icons.tsx
@@ -14,7 +14,6 @@
   limitations under the License.
 */
 
-import * as React from 'react';
 import './colors.css';
 import './common.css';
 
diff --git a/packages/html-reporter/src/imageDiffView.tsx b/packages/html-reporter/src/imageDiffView.tsx
index 1ac2630784..3496bab99c 100644
--- a/packages/html-reporter/src/imageDiffView.tsx
+++ b/packages/html-reporter/src/imageDiffView.tsx
@@ -93,10 +93,10 @@ export const ImageDiffView: React.FunctionComponent<{
   </div>;
 };
 
-export const ImageDiffSlider: React.FC<{
+export const ImageDiffSlider: React.FC<React.PropsWithChildren<{
   sliderPosition: number,
   setSliderPosition: (position: number) => void,
-}> = ({ children, sliderPosition, setSliderPosition }) => {
+}>> = ({ children, sliderPosition, setSliderPosition }) => {
   const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null);
   const size = sliderPosition;
 
diff --git a/packages/html-reporter/src/metadataView.tsx b/packages/html-reporter/src/metadataView.tsx
index 8c3d481878..ed5cf8e817 100644
--- a/packages/html-reporter/src/metadataView.tsx
+++ b/packages/html-reporter/src/metadataView.tsx
@@ -31,9 +31,9 @@ export type Metainfo = {
   'revision.link'?: string;
   'ci.link'?: string;
   'timestamp'?: number
-} | undefined;
+};
 
-class ErrorBoundary extends React.Component<{}, { error: Error | null, errorInfo: React.ErrorInfo | null }> {
+class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error: Error | null, errorInfo: React.ErrorInfo | null }> {
   state: { error: Error | null, errorInfo: React.ErrorInfo | null } = {
     error: null,
     errorInfo: null,
diff --git a/packages/html-reporter/src/testFileView.tsx b/packages/html-reporter/src/testFileView.tsx
index 106c9259c3..a45c75b0d9 100644
--- a/packages/html-reporter/src/testFileView.tsx
+++ b/packages/html-reporter/src/testFileView.tsx
@@ -23,13 +23,13 @@ import { Link, ProjectLink } from './links';
 import { statusIcon } from './statusIcon';
 import './testFileView.css';
 
-export const TestFileView: React.FC<{
+export const TestFileView: React.FC<React.PropsWithChildren<{
   report: HTMLReport;
   file: TestFileSummary;
   isFileExpanded: (fileId: string) => boolean;
   setFileExpanded: (fileId: string, expanded: boolean) => void;
   filter: Filter;
-}> = ({ file, report, isFileExpanded, setFileExpanded, filter }) => {
+}>> = ({ file, report, isFileExpanded, setFileExpanded, filter }) => {
   return <Chip
     expanded={isFileExpanded(file.fileId)}
     noInsets={true}
diff --git a/packages/trace-viewer/src/ui/consoleTab.tsx b/packages/trace-viewer/src/ui/consoleTab.tsx
index 9ab44e0ebe..a13ef76206 100644
--- a/packages/trace-viewer/src/ui/consoleTab.tsx
+++ b/packages/trace-viewer/src/ui/consoleTab.tsx
@@ -64,7 +64,7 @@ export const ConsoleTab: React.FunctionComponent<{
         } else {
           return <div className='console-line error' key={index}>
             <span className={'codicon codicon-error'}></span>
-            <span className='console-line-message'>{value}</span>
+            <span className='console-line-message'>{String(value)}</span>
           </div>;
         }
       }
diff --git a/packages/web/src/components/expandable.tsx b/packages/web/src/components/expandable.tsx
index 02bdb354f7..af15217d11 100644
--- a/packages/web/src/components/expandable.tsx
+++ b/packages/web/src/components/expandable.tsx
@@ -16,13 +16,12 @@
 
 import * as React from 'react';
 
-export const Expandable: React.FunctionComponent<{
+export const Expandable: React.FunctionComponent<React.PropsWithChildren<{
   title: JSX.Element | string,
   setExpanded: Function,
   expanded: Boolean,
   style?: React.CSSProperties,
-  children: JSX.Element | JSX.Element[] | string,
-}> = ({ title, children, setExpanded, expanded, style }) => {
+}>> = ({ title, children, setExpanded, expanded, style }) => {
   return <div style={{ ...style, display: 'flex', flexDirection: 'column' }}>
     <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', whiteSpace: 'nowrap' }}>
       <div
diff --git a/packages/web/src/components/splitView.tsx b/packages/web/src/components/splitView.tsx
index 3600cfe65c..bf00e35d57 100644
--- a/packages/web/src/components/splitView.tsx
+++ b/packages/web/src/components/splitView.tsx
@@ -22,6 +22,7 @@ export interface SplitViewProps {
   sidebarHidden?: boolean,
   sidebarIsFirst?: boolean,
   orientation?: 'vertical' | 'horizontal',
+  children: JSX.Element | JSX.Element[] | string,
 }
 
 const kMinSize = 50;
diff --git a/packages/web/src/components/toolbar.tsx b/packages/web/src/components/toolbar.tsx
index b0be23ffd3..ddfede6176 100644
--- a/packages/web/src/components/toolbar.tsx
+++ b/packages/web/src/components/toolbar.tsx
@@ -20,7 +20,7 @@ import * as React from 'react';
 export interface ToolbarProps {
 }
 
-export const Toolbar: React.FC<ToolbarProps> = ({
+export const Toolbar: React.FC<React.PropsWithChildren<ToolbarProps>> = ({
   children
 }) => {
   return <div className='toolbar'>{children}</div>;
diff --git a/packages/web/src/components/toolbarButton.tsx b/packages/web/src/components/toolbarButton.tsx
index 3f9a5e6861..61e95f2276 100644
--- a/packages/web/src/components/toolbarButton.tsx
+++ b/packages/web/src/components/toolbarButton.tsx
@@ -23,10 +23,10 @@ export interface ToolbarButtonProps {
   icon: string,
   disabled?: boolean,
   toggled?: boolean,
-  onClick: () => void
+  onClick: () => void,
 }
 
-export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
+export const ToolbarButton: React.FC<React.PropsWithChildren<ToolbarButtonProps>> = ({
   children,
   title = '',
   icon = '',