Component can't be used as JSX component - reactjs

Question

After updating some of the legacy code from to node 16 and react 17.0.2 I have started getting this error in the React.FC component. 'WarningIcon' cannot be used as a JSX component.
My component Looks like this:
import { SvgIconProps } from '#material-ui/core/SvgIcon';
import { WithStyles, withStyles } from '#material-ui/core/styles';
import ReportProblemIcon from '#material-ui/icons/ReportProblem';
import classNames from 'classnames';
import * as React from 'react';
type TStyleRules = 'root' | 'defaultColor';
const styles = () => ({
root: {
'&$defaultColor': {
color: string,
},
},
defaultColor: {},
});
// tslint:disable-next-line:variable-name
const WarningIcon: React.FC<SvgIconProps & WithStyles<TStyleRules>> = ({
classes,
className,
...props
}) => (
<>
<ReportProblemIcon
className={classNames(classes.root, className, {
[classes.defaultColor]: !props.color || props.color === 'primary',
})}
{...props}
/>
</>
);
export default withStyles(styles)(WarningIcon);
When I call this component in my main component.
<WarningIcon className='some-random-class' />
Complete error Message:
TS2786: 'WarningIcon' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<Pick<{ children?: ReactNode; color?: "error" | "inherit" | "disabled" | "action" | "primary" | "secondary" | undefined; fontSize?: "default" | ... 4 more ... | undefined; htmlColor?: string | undefined; shapeRendering?: string | undefined; titleAccess?: string | undefined; viewBox?...' is not a valid JSX element.
value in package.json
{
"name": "sample-app",
"version": "2.0.1",
"private": true,
"proxy": "http://localhost:5000",
"engines": {
"node": ">= 16.0.0"
},
"dependencies": {
"#hapi/basic": "^6.0.0",
"#hapi/good": "^9.0.1",
"#hapi/hapi": "^18.2.0",
"#hapi/inert": "6.0.0",
"#hapi/nes": "11.0.0",
"#hapi/vision": "^5.5.4",
"#material-ui/core": "^4.12.2",
"#material-ui/icons": "^4.11.2",
"#sc-devops/ux-theme": "^0.0.8",
"axios": "^0.21.1",
"badwords-list": "^1.0.0",
"boom": "^7.3.0",
"classnames": "^2.3.1",
"dotenv": "^10.0.0",
"file-saver": "^2.0.5",
"hapi-auth-jwt2": "^10.2.0",
"hapi-good-winston": "^3.0.1",
"hapi-require-https": "^5.0.0",
"hapi-swagger": "^14.2.1",
"joi": "^17.4.2",
"js-yaml": "^4.1.0",
"json2csv": "^5.0.6",
"jsonwebtoken": "^8.5.1",
"jszip": "^3.6.0",
"kafkajs": "^1.15.0",
"ldapjs": "^2.3.0",
"lodash": "^4.17.21",
"material-ui-chip-input": "^2.0.0-beta.2",
"memory-cache": "^0.2.0",
"node-cache": "^5.1.2",
"passport-saml": "^3.1.2",
"pg": "^8.7.1",
"pg-hstore": "^2.3.4",
"raf": "^3.4.1",
"react": "^17.0.2",
"react-ace": "^9.4.1",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^17.0.2",
"react-loadable": "^5.5.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-select": "^4.3.1",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"sequelize": "^6.6.5",
"swagger-ui": "^3.51.1",
"tunnel": "^0.0.6",
"uuid": "^8.3.2",
"winston": "^3.3.3",
"yauzl": "^2.10.0"
},
"scripts": {
"start-server": "concurrently --kill-others \"webpack --mode development --progress --watch\" \"nodemon build/main.js\"",
"start-client": "react-scripts start",
"start": "concurrently --kill-others \"yarn start-server\" \"yarn start-client\"",
},
"jest": {
"collectCoverageFrom": [
"src/**/*.ts",
"src/**/*.tsx",
"!src/**/*.test.ts",
"!src/**/types/*.ts",
"!src/**/*.test.tsx",
"!src/typings.d.ts",
"!src/db/**/*"
]
},
"devDependencies": {
"#types/ace": "^0.0.44",
"#types/bluebird": "^3.5.36",
"#types/boom": "^7.3.1",
"#types/enzyme": "^3.10.8",
"#types/file-saver": "^2.0.3",
"#types/hapi__hapi": "^20.0.2",
"#types/hapi__nes": "^11.0.4",
"#types/jest": "^26.0.14",
"#types/js-yaml": "^4.0.2",
"#types/json2csv": "^5.0.3",
"#types/jsonwebtoken": "^8.5.4",
"#types/jszip": "^3.4.1",
"#types/ldapjs": "^2.2.0",
"#types/lodash": "^4.14.171",
"#types/memory-cache": "^0.2.1",
"#types/node": "^14.14.9",
"#types/query-string": "^6.3.0",
"#types/react": "^17.0.15",
"#types/react-beautiful-dnd": "^13.0.0",
"#types/react-document-title": "^2.0.4",
"#types/react-dom": "^17.0.9",
"#types/react-loadable": "^5.5.4",
"#types/react-redux": "^7.1.18",
"#types/react-router": "^5.1.16",
"#types/react-router-dom": "^5.1.8",
"#types/react-select": "^4.0.17",
"#types/redux-logger": "^3.0.9",
"#types/sequelize": "^4.28.10",
"#types/tunnel": "^0.0.3",
"#types/uuid": "^8.3.1",
"#types/winston": "^2.4.4",
"#types/yauzl": "^2.9.2",
"axios-mock-adapter": "^1.19.0",
"chokidar": "^3.5.2",
"concurrently": "^6.2.0",
"cross-env": "^7.0.3",
"enzyme": "^3.11.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
"nodemon": "^2.0.12",
"prettier": "^2.3.2",
"redux-logger": "^3.0.6",
"sequelize-cli": "^6.2.0",
"ts-loader": "^9.2.5",
"tslint-config-airbnb": "^5.11.2",
"tslint-config-prettier": "^1.18.0",
"typescript": "4.3.5",
"webpack": "^5.50.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"webpack-node-externals": "^3.0.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"eslintConfig": {
"extends": [
"react-app"
]
}
}