Update dependency @types/react to v17 (#40440)

* Update dependency @types/react to v17

* Chore: Typescript fixes

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

packages/grafana-data/package.json

@@ -44,7 +44,7 @@
     "@types/marked": "1.1.0",
     "@types/node": "10.14.1",
     "@types/papaparse": "5.2.0",
-    "@types/react": "16.9.9",
+    "@types/react": "17.0.30",
     "@types/rollup-plugin-visualizer": "2.6.0",
     "@types/sinon": "^10.0.4",
     "rollup": "2.33.3",

packages/grafana-ui/package.json

@@ -102,7 +102,7 @@
     "@types/mock-raf": "1.0.2",
     "@types/node": "10.14.1",
     "@types/papaparse": "5.2.0",
-    "@types/react": "16.9.9",
+    "@types/react": "17.0.30",
     "@types/react-beautiful-dnd": "13.1.1",
     "@types/react-calendar": "^3.4.3",
     "@types/react-color": "3.0.1",

packages/grafana-ui/src/components/Card/Card.tsx

@@ -39,10 +39,10 @@ export const Card: CardInterface = ({ heading, description, disabled, href, onCl
   const [tags, figure, meta, actions, secondaryActions] = ['Tags', 'Figure', 'Meta', 'Actions', 'SecondaryActions'].map(
     (item) => {
       const found = React.Children.toArray(children as React.ReactElement[]).find((child) => {
-        return child?.type && (child.type as any).displayName === item;
+        return React.isValidElement(child) && child?.type && (child.type as any).displayName === item;
       });
 
-      if (found) {
+      if (found && React.isValidElement(found)) {
         return React.cloneElement(found, { disabled, styles, ...found.props });
       }
       return found;

packages/grafana-ui/src/components/Table/types.ts

@@ -1,7 +1,7 @@
 import { CellProps } from 'react-table';
 import { Field, KeyValue } from '@grafana/data';
 import { TableStyles } from './styles';
-import { CSSProperties, FC } from 'react';
+import { FC } from 'react';
 
 export { TableFieldOptions, TableCellDisplayMode, FieldTextAlignment } from '@grafana/schema';
 
@@ -24,7 +24,7 @@ export interface TableSortByFieldState {
 
 export interface TableCellProps extends CellProps<any> {
   tableStyles: TableStyles;
-  cellProps: CSSProperties;
+  cellProps: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
   field: Field;
   onCellFilterAdded: TableFilterActionCallback;
   innerWidth: number;

packages/jaeger-ui-components/package.json

@@ -22,7 +22,7 @@
     "@types/deep-freeze": "^0.1.1",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/lodash": "^4.14.123",
-    "@types/react": "16.9.9",
+    "@types/react": "17.0.30",
     "@types/react-icons": "2.2.7",
     "@types/recompose": "^0.30.7",
     "@types/slate-react": "0.22.5",