Component can't be used as JSX component

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"
    ]
  }
}