diff --git a/.eslintrc.js b/.eslintrc.js
index 407b2b41..556eabda 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -43,6 +43,8 @@ module.exports = {
     'react/jsx-one-expression-per-line': 'off',
     'react/jsx-wrap-multilines': 'off',
     'react/jsx-props-no-spreading': 'off',
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     'arrow-body-style': ['warn', 'as-needed'],
     'no-param-reassign': ['error', { props: false }],
     'import/prefer-default-export': 'off',
diff --git a/package.json b/package.json
index f35d5e6b..525f40a4 100644
--- a/package.json
+++ b/package.json
@@ -115,11 +115,11 @@
     "lint-staged": "~10.5.0",
     "node-sass": "~4.14.1",
     "prettier": "~2.2.0",
-    "react": "~16.14.0",
+    "react": "~17.0.0",
     "react-bootstrap": "~1.0.0-beta.16",
     "react-docgen": "~5.3.0",
     "react-docgen-typescript-loader": "~3.7.0",
-    "react-dom": "~16.14.0",
+    "react-dom": "~17.0.0",
     "react-is": "~17.0.1",
     "rollup-plugin-postcss": "~3.1.1",
     "sass-loader": "~10.1.0",
@@ -127,7 +127,7 @@
     "sinon": "~9.2.0",
     "tsdx": "~0.14.0",
     "tslib": "~2.1.0",
-    "typescript": "~3.8.2"
+    "typescript": "~4.1.3"
   },
   "dependencies": {
     "@fortawesome/fontawesome-common-types": "~0.2.28",
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 17c68b18..53ba2ec3 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -1,4 +1,4 @@
-import React, { Component, ReactNode, CSSProperties } from 'react'
+import { Component, ReactNode, CSSProperties } from 'react'
 import BootstrapAlert from 'react-bootstrap/Alert'
 
 import { ColorVariant } from '../../interfaces'
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 4c0c8317..99782ba5 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import BootstrapBadge from 'react-bootstrap/Badge'
 
 import { ColorVariant } from '../../interfaces'
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
index b8a3c0c3..6f0cf02e 100644
--- a/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import BootstrapBreadcrumb from 'react-bootstrap/Breadcrumb'
 
 export interface BreadcrumbProps {
diff --git a/src/components/Breadcrumb/BreadcrumbItem.tsx b/src/components/Breadcrumb/BreadcrumbItem.tsx
index f5250d86..197bebfd 100644
--- a/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import BootstrapBreadcrumbItem from 'react-bootstrap/BreadcrumbItem'
 
 interface Props {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 3425e30f..b8eb9dd6 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import BootstrapButton from 'react-bootstrap/Button'
 
 import { ButtonVariant } from '../../interfaces'
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index 60d941eb..762b74a4 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -3,7 +3,7 @@ import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
 import FullCalendar from '@fullcalendar/react'
 import timeGridPlugin from '@fullcalendar/timegrid'
-import React from 'react'
+import { createRef } from 'react'
 
 import Event from './interfaces'
 
@@ -64,7 +64,7 @@ const Calendar = (props: CalendarProps) => {
     onNextClick,
     onTodayClick,
   } = props
-  const fullCalendarRef = React.createRef<FullCalendar>()
+  const fullCalendarRef = createRef<FullCalendar>()
 
   const onNavClick = (to: 'prev' | 'next' | 'today') => {
     const calendar = fullCalendarRef?.current?.getApi()
diff --git a/src/components/Callout/Callout.tsx b/src/components/Callout/Callout.tsx
index d0b31bcb..5d8f98b0 100644
--- a/src/components/Callout/Callout.tsx
+++ b/src/components/Callout/Callout.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import React, { CSSProperties, ReactElement } from 'react'
+import { CSSProperties, ReactElement } from 'react'
+import * as React from 'react'
 
 import { ColorVariant } from '../../interfaces'
 
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 8799eb3a..a7edc1bc 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import FormCheck from 'react-bootstrap/FormCheck'
 
 interface Props {
diff --git a/src/components/DateTimePicker/DateTimePicker.tsx b/src/components/DateTimePicker/DateTimePicker.tsx
index 089c62ba..d003298a 100644
--- a/src/components/DateTimePicker/DateTimePicker.tsx
+++ b/src/components/DateTimePicker/DateTimePicker.tsx
@@ -1,5 +1,6 @@
 import * as locales from 'date-fns/locale'
-import React, { ReactNode, CSSProperties } from 'react'
+import { ReactNode, CSSProperties } from 'react'
+import * as React from 'react'
 import InputGroup from 'react-bootstrap/InputGroup'
 import DatePicker, { registerLocale, setDefaultLocale } from 'react-datepicker'
 
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 914131f8..ca0f00bd 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import DropdownRB from 'react-bootstrap/Dropdown'
 import DropdownButton from 'react-bootstrap/DropdownButton'
 
diff --git a/src/components/Graph/BarGraph.tsx b/src/components/Graph/BarGraph.tsx
index a27e96ee..4651bbba 100644
--- a/src/components/Graph/BarGraph.tsx
+++ b/src/components/Graph/BarGraph.tsx
@@ -1,5 +1,5 @@
 import ChartJs from 'chart.js'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import { Axis, Dataset } from './interfaces'
 import * as util from './util'
diff --git a/src/components/Graph/LineGraph.tsx b/src/components/Graph/LineGraph.tsx
index de612c83..237cc9fa 100644
--- a/src/components/Graph/LineGraph.tsx
+++ b/src/components/Graph/LineGraph.tsx
@@ -1,5 +1,5 @@
 import ChartJs from 'chart.js'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import { Axis, Dataset } from './interfaces'
 import * as util from './util'
diff --git a/src/components/Graph/PieGraph.tsx b/src/components/Graph/PieGraph.tsx
index ad57b836..17e8cdce 100644
--- a/src/components/Graph/PieGraph.tsx
+++ b/src/components/Graph/PieGraph.tsx
@@ -1,5 +1,5 @@
 import ChartJs from 'chart.js'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import { Dataset } from './interfaces'
 import * as util from './util'
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 3f19d931..c37fc54d 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,6 +1,7 @@
 import { IconPrefix, IconName, SizeProp } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 
 import { IconType } from './interfaces'
 
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index ebc62ae6..0e021a01 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import BootstrapImage from 'react-bootstrap/Image'
 
 interface Props extends React.ImgHTMLAttributes<HTMLImageElement> {
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 8058bce3..3b248bf0 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React, { CSSProperties } from 'react'
+import { createElement, CSSProperties } from 'react'
 import FormLabel from 'react-bootstrap/FormLabel'
 
 interface Props {
@@ -25,7 +25,7 @@ interface Props {
  *  hidden text to be read explaing the input is required incase the title attribute
  *  is not supported by the screen reader
  */
-const asterisk = React.createElement('i', { style: { color: 'red' } }, [
+const asterisk = createElement('i', { style: { color: 'red' } }, [
   <FontAwesomeIcon
     icon="asterisk"
     key="asterisk"
diff --git a/src/components/Layout/Column.tsx b/src/components/Layout/Column.tsx
index 8169e817..6b5df531 100644
--- a/src/components/Layout/Column.tsx
+++ b/src/components/Layout/Column.tsx
@@ -6,7 +6,7 @@ interface Props {
    * HTML element to be used for the component
    * @default <div>
    */
-  as?: React.ElementType
+  as?: keyof JSX.IntrinsicElements
   /**
    * The number of columns to span on extra large devices (≥ 1200px)
    */
diff --git a/src/components/Layout/Container.tsx b/src/components/Layout/Container.tsx
index b8a2237a..f9c9e09c 100644
--- a/src/components/Layout/Container.tsx
+++ b/src/components/Layout/Container.tsx
@@ -6,7 +6,7 @@ interface Props {
    * A custom element to be used for the component
    * @default <div>
    */
-  as?: React.ElementType
+  as?: keyof JSX.IntrinsicElements // As extends React.ElementType // '"symbol" | undefined'
   /**
    * Allow the Container to fill all of its available horizontal space
    * @default false
diff --git a/src/components/Layout/Row.tsx b/src/components/Layout/Row.tsx
index 386e8eb4..d30db668 100644
--- a/src/components/Layout/Row.tsx
+++ b/src/components/Layout/Row.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import BootstrapRow from 'react-bootstrap/Row'
 
 interface Props {
@@ -6,7 +7,7 @@ interface Props {
    * HTML element to be used for the component
    * @default <div>
    */
-  as?: React.ElementType
+  as?: keyof JSX.IntrinsicElements // React.ElementType
   /**
    * Removes the gutter spacing between `Columns` as well as any added negative margins.
    * @default false
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 384048c0..f97d05b5 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import ListGroup from 'react-bootstrap/ListGroup'
 
 interface Props {
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 3932f5c9..471d6fe7 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import ListGroupItem from 'react-bootstrap/ListGroupItem'
 
 import { ColorVariant } from '../../interfaces'
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 13e6be1b..583eb297 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,5 +1,5 @@
 /* eslint react/prop-types: 0 */
-import React, { ReactNode, CSSProperties } from 'react'
+import { ReactNode, CSSProperties } from 'react'
 import BootstrapModal from 'react-bootstrap/Modal'
 
 import { Button, ButtonProps } from '../Button'
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index a02695a0..52c65d51 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,5 +1,5 @@
 import { SizeProp } from '@fortawesome/fontawesome-svg-core'
-import React from 'react'
+import * as React from 'react'
 import Form from 'react-bootstrap/Form'
 import FormControl from 'react-bootstrap/FormControl'
 import Nav from 'react-bootstrap/Nav'
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index 255a7e58..7cabfdf4 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
+import * as React from 'react'
 import { Card, Collapse } from 'react-bootstrap'
 
 import { ColorVariant } from '../../interfaces'
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index 3d3bf705..9d1ac855 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import Badge from 'react-bootstrap/Badge'
 
 import { ColorVariant } from '../../interfaces'
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index 7ed8e8ec..247180fa 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, CSSProperties } from 'react'
+import { ReactNode, CSSProperties } from 'react'
+import * as React from 'react'
 import Form from 'react-bootstrap/Form'
 
 interface Props {
diff --git a/src/components/RichText/RichText.tsx b/src/components/RichText/RichText.tsx
index 4f7592e5..277918ca 100644
--- a/src/components/RichText/RichText.tsx
+++ b/src/components/RichText/RichText.tsx
@@ -1,5 +1,5 @@
 import { Editor } from '@tinymce/tinymce-react'
-import React from 'react'
+import * as React from 'react'
 
 import 'tinymce/tinymce'
 
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 55136c90..2c1b8a66 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import 'react-bootstrap-typeahead/css/Typeahead.css'
 
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index 84d7db9d..731bc10b 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/src/components/Spinner/Spinner.tsx
@@ -1,5 +1,4 @@
 /* eslint react/jsx-props-no-spreading: "off" */
-import React from 'react'
 import * as Spinners from 'react-spinners'
 
 import { SpinnerType, SpinnerSizeUnit } from './interfaces'
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index de2bfb7d..6caebd8d 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import FormCheck from 'react-bootstrap/FormCheck'
 
 interface Props {
diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx
index ed669a9f..7bd44e82 100644
--- a/src/components/Tab/Tab.tsx
+++ b/src/components/Tab/Tab.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { Button } from '../Button'
 import { IconType } from '../Icon/interfaces'
diff --git a/src/components/Tab/TabsHeader.tsx b/src/components/Tab/TabsHeader.tsx
index 787722c1..1bece4aa 100644
--- a/src/components/Tab/TabsHeader.tsx
+++ b/src/components/Tab/TabsHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 interface Props {
   /** The children to render */
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 3572ca07..8cd4e847 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ButtonVariant } from 'src/interfaces'
 
 import { Button } from '../Button'
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 58384d3d..0b40bcdd 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import Form from 'react-bootstrap/Form'
 
 import { getControlSize } from '../../helpers/controlSize'
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index 062b2542..52c5a302 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import Form from 'react-bootstrap/Form'
 
 interface Props {
diff --git a/src/components/Toaster/components.tsx b/src/components/Toaster/components.tsx
index 5e292c46..8ed8f50f 100644
--- a/src/components/Toaster/components.tsx
+++ b/src/components/Toaster/components.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { ToastProps } from './interfaces'
 
 export const titleWithMessage = (title: ToastProps['title'], message: ToastProps['message']) => (
diff --git a/src/components/Toaster/index.tsx b/src/components/Toaster/index.tsx
index f9418b61..ea9f6764 100644
--- a/src/components/Toaster/index.tsx
+++ b/src/components/Toaster/index.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { ToastContainer, toast, Slide } from 'react-toastify'
 
 import { titleWithMessage, titleWithoutMessage } from './components'
diff --git a/src/components/Typeahead/Typeahead.tsx b/src/components/Typeahead/Typeahead.tsx
index 047ec773..2c3d04ee 100644
--- a/src/components/Typeahead/Typeahead.tsx
+++ b/src/components/Typeahead/Typeahead.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
+import * as React from 'react'
 import { AsyncTypeahead } from 'react-bootstrap-typeahead'
 
 interface Props {
diff --git a/src/components/Typography/Typography.tsx b/src/components/Typography/Typography.tsx
index 6da93ac7..fe64926a 100644
--- a/src/components/Typography/Typography.tsx
+++ b/src/components/Typography/Typography.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 interface Props {
   /**
diff --git a/src/components/VideoPlayer/VideoPlayer.tsx b/src/components/VideoPlayer/VideoPlayer.tsx
index 68fa6d9b..57331448 100644
--- a/src/components/VideoPlayer/VideoPlayer.tsx
+++ b/src/components/VideoPlayer/VideoPlayer.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Player } from 'video-react'
 import 'video-react/dist/video-react.css'
 
diff --git a/stories/.eslintrc.js b/stories/.eslintrc.js
index 3553bc1e..8e1337e8 100644
--- a/stories/.eslintrc.js
+++ b/stories/.eslintrc.js
@@ -1,6 +1,8 @@
 module.exports = {
   rules: {
     'import/no-extraneous-dependencies': 0,
-    'no-alert': 'off'
+    'no-alert': 'off',
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
   },
 }
diff --git a/stories/alerts.stories.tsx b/stories/alerts.stories.tsx
index 5167ebb5..f512048c 100644
--- a/stories/alerts.stories.tsx
+++ b/stories/alerts.stories.tsx
@@ -1,5 +1,4 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
-import React from 'react'
 
 import { Alert, AlertProps } from '../src'
 
diff --git a/stories/badges.stories.tsx b/stories/badges.stories.tsx
index 64b05a4e..20867490 100644
--- a/stories/badges.stories.tsx
+++ b/stories/badges.stories.tsx
@@ -1,5 +1,4 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
-import React from 'react'
 
 import { Badge, BadgeProps } from '../src'
 
diff --git a/stories/breadcrumbs.stories.tsx b/stories/breadcrumbs.stories.tsx
index 64312fe3..ad8c9230 100644
--- a/stories/breadcrumbs.stories.tsx
+++ b/stories/breadcrumbs.stories.tsx
@@ -1,5 +1,4 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
-import React from 'react'
 
 import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from '../src'
 
diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx
index eba5de91..ab637bd5 100644
--- a/stories/buttons.stories.tsx
+++ b/stories/buttons.stories.tsx
@@ -1,5 +1,4 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
-import React from 'react'
 
 import { Button, ButtonProps } from '../src'
 
diff --git a/stories/calendar.stories.tsx b/stories/calendar.stories.tsx
index 7aea439c..41150821 100644
--- a/stories/calendar.stories.tsx
+++ b/stories/calendar.stories.tsx
@@ -1,6 +1,5 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
 import moment from 'moment'
-import React from 'react'
 
 import { Calendar, CalendarProps, Toast, Toaster } from '../src'
 
diff --git a/stories/callout.stories.tsx b/stories/callout.stories.tsx
index a4ef4c1c..388f4766 100644
--- a/stories/callout.stories.tsx
+++ b/stories/callout.stories.tsx
@@ -1,5 +1,4 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
-import React from 'react'
 
 import { Callout, CalloutProps } from '../src'
 
diff --git a/stories/checkbox.stories.tsx b/stories/checkbox.stories.tsx
index 55ed0646..84cd5de9 100644
--- a/stories/checkbox.stories.tsx
+++ b/stories/checkbox.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Checkbox } from '../src'
 
diff --git a/stories/datetimepicker.stories.tsx b/stories/datetimepicker.stories.tsx
index 3debd3c2..82f98161 100644
--- a/stories/datetimepicker.stories.tsx
+++ b/stories/datetimepicker.stories.tsx
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react'
 import * as locales from 'date-fns/locale'
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { DateTimePicker, Dropdown } from '../src'
 
diff --git a/stories/dropdown.stories.tsx b/stories/dropdown.stories.tsx
index 84bb48a6..0a1ff4be 100644
--- a/stories/dropdown.stories.tsx
+++ b/stories/dropdown.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 import ButtonToolbar from 'react-bootstrap/ButtonToolbar'
 
 import { Dropdown } from '../src'
diff --git a/stories/graphs.stories.tsx b/stories/graphs.stories.tsx
index 2cc5d275..111d1383 100644
--- a/stories/graphs.stories.tsx
+++ b/stories/graphs.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { LineGraph, PieGraph, BarGraph } from '../src'
 
diff --git a/stories/icons.stories.tsx b/stories/icons.stories.tsx
index 1816f0aa..63ba3c56 100644
--- a/stories/icons.stories.tsx
+++ b/stories/icons.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Icon } from '../src'
 
diff --git a/stories/image.stories.tsx b/stories/image.stories.tsx
index 01e9eede..6a797920 100644
--- a/stories/image.stories.tsx
+++ b/stories/image.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Image } from '../src'
 
diff --git a/stories/label.stories.tsx b/stories/label.stories.tsx
index 7165e691..9e22e177 100644
--- a/stories/label.stories.tsx
+++ b/stories/label.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Label, TextInput } from '../src'
 
diff --git a/stories/layout.stories.tsx b/stories/layout.stories.tsx
index dd3f49dc..bc2a479f 100644
--- a/stories/layout.stories.tsx
+++ b/stories/layout.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Container, Row, Column } from '../src/components/Layout'
 import './layout.stories.css'
diff --git a/stories/lists.stories.tsx b/stories/lists.stories.tsx
index 79d1c644..886c1d97 100644
--- a/stories/lists.stories.tsx
+++ b/stories/lists.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { List, ListItem } from '../src'
 
diff --git a/stories/modal.stories.tsx b/stories/modal.stories.tsx
index a9f4c606..97953565 100644
--- a/stories/modal.stories.tsx
+++ b/stories/modal.stories.tsx
@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/react'
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { Modal, Button } from '../src'
 
diff --git a/stories/navbar.stories.tsx b/stories/navbar.stories.tsx
index 220d776f..0a6b8f22 100644
--- a/stories/navbar.stories.tsx
+++ b/stories/navbar.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Navbar, Toaster, Toast } from '../src'
 
diff --git a/stories/panel.stories.tsx b/stories/panel.stories.tsx
index 369cee9c..0601d2cb 100644
--- a/stories/panel.stories.tsx
+++ b/stories/panel.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Panel } from '../src/components/Panel'
 
diff --git a/stories/pills.stories.tsx b/stories/pills.stories.tsx
index 464f084a..baa50cdb 100644
--- a/stories/pills.stories.tsx
+++ b/stories/pills.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Pill } from '../src'
 
diff --git a/stories/radio.stories.tsx b/stories/radio.stories.tsx
index 1b199850..5ee68951 100644
--- a/stories/radio.stories.tsx
+++ b/stories/radio.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Radio } from '../src'
 
diff --git a/stories/richtext.stories.tsx b/stories/richtext.stories.tsx
index 806a1b68..f638c920 100644
--- a/stories/richtext.stories.tsx
+++ b/stories/richtext.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { RichText } from '../src'
 
diff --git a/stories/select.stories.tsx b/stories/select.stories.tsx
index 97a0101b..664709e8 100644
--- a/stories/select.stories.tsx
+++ b/stories/select.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Select, Toast, Toaster } from '../src'
 
diff --git a/stories/spinner.stories.tsx b/stories/spinner.stories.tsx
index db6f2816..4f66047c 100644
--- a/stories/spinner.stories.tsx
+++ b/stories/spinner.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Spinner } from '../src'
 
diff --git a/stories/switch.stories.tsx b/stories/switch.stories.tsx
index 635718b4..27546021 100644
--- a/stories/switch.stories.tsx
+++ b/stories/switch.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Switch } from '../src'
 
diff --git a/stories/tab.stories.tsx b/stories/tab.stories.tsx
index a321d6d1..079cb9e8 100644
--- a/stories/tab.stories.tsx
+++ b/stories/tab.stories.tsx
@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/react'
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { Tab, TabsHeader } from '../src'
 
diff --git a/stories/table.stories.tsx b/stories/table.stories.tsx
index 5e1149c6..a300ae2d 100644
--- a/stories/table.stories.tsx
+++ b/stories/table.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Table, Toast, Toaster } from '../src'
 import { ButtonVariant } from '../src/interfaces'
diff --git a/stories/textfield.stories.tsx b/stories/textfield.stories.tsx
index eb59297a..eace7406 100644
--- a/stories/textfield.stories.tsx
+++ b/stories/textfield.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { TextField } from '../src'
 
diff --git a/stories/textinput.stories.tsx b/stories/textinput.stories.tsx
index 9fd018e5..5fad8ba1 100644
--- a/stories/textinput.stories.tsx
+++ b/stories/textinput.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { TextInput } from '../src'
 
diff --git a/stories/toaster.stories.tsx b/stories/toaster.stories.tsx
index 186e20b1..745f9810 100644
--- a/stories/toaster.stories.tsx
+++ b/stories/toaster.stories.tsx
@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 import Button from 'react-bootstrap/Button'
 
 import { Toast, Toaster } from '../src'
diff --git a/stories/typeahead.stories.tsx b/stories/typeahead.stories.tsx
index dfa10783..61573ddb 100644
--- a/stories/typeahead.stories.tsx
+++ b/stories/typeahead.stories.tsx
@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
+import * as React from 'react'
 
 import { Typeahead } from '../src'
 
diff --git a/stories/typography.stories.tsx b/stories/typography.stories.tsx
index 6719cc52..2db10d52 100644
--- a/stories/typography.stories.tsx
+++ b/stories/typography.stories.tsx
@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
+import * as React from 'react'
 
 import { Typography } from '../src'
 
diff --git a/stories/videoplayer.stories.tsx b/stories/videoplayer.stories.tsx
index a64dbde6..f998d31c 100644
--- a/stories/videoplayer.stories.tsx
+++ b/stories/videoplayer.stories.tsx
@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
+import * as React from 'react'
 import {
   BigPlayButton,
   Shortcut,
diff --git a/test/alert.test.tsx b/test/alert.test.tsx
index d76d7ef1..fbfe5e36 100644
--- a/test/alert.test.tsx
+++ b/test/alert.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import BootstrapAlert from 'react-bootstrap/Alert'
 
 import { Alert, Button } from '../src'
diff --git a/test/badge.test.tsx b/test/badge.test.tsx
index 37e13b7d..31fd7ea5 100644
--- a/test/badge.test.tsx
+++ b/test/badge.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import { Badge as BootstrapBadge } from 'react-bootstrap'
 
 import { Badge } from '../src'
diff --git a/test/bargraph.test.tsx b/test/bargraph.test.tsx
index 6cc54b2a..008973a2 100644
--- a/test/bargraph.test.tsx
+++ b/test/bargraph.test.tsx
@@ -1,5 +1,4 @@
 import { mount } from 'enzyme'
-import * as React from 'react'
 
 import { BarGraph } from '../src'
 
diff --git a/test/breadcrumb.test.tsx b/test/breadcrumb.test.tsx
index b53d03b7..e2bdee7a 100644
--- a/test/breadcrumb.test.tsx
+++ b/test/breadcrumb.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import BootstrapBreadcrumb from 'react-bootstrap/Breadcrumb'
 import BootstrapBreadcrumbItem from 'react-bootstrap/BreadcrumbItem'
 import sinon from 'sinon'
diff --git a/test/button.test.tsx b/test/button.test.tsx
index 85619837..6216bc11 100644
--- a/test/button.test.tsx
+++ b/test/button.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import { Button as BootstrapButton } from 'react-bootstrap'
 import * as sinon from 'sinon'
 
diff --git a/test/calendar.test.tsx b/test/calendar.test.tsx
index a2e5196e..899fa560 100644
--- a/test/calendar.test.tsx
+++ b/test/calendar.test.tsx
@@ -2,7 +2,6 @@ import FullCalendar from '@fullcalendar/react'
 import { TimeGridView } from '@fullcalendar/timegrid'
 import { mount, shallow } from 'enzyme'
 import moment from 'moment'
-import React from 'react'
 import { act } from 'react-dom/test-utils'
 
 import { Calendar } from '../src'
diff --git a/test/callout.test.tsx b/test/callout.test.tsx
index 3e512be8..393a76fc 100644
--- a/test/callout.test.tsx
+++ b/test/callout.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 
 import { Callout } from '../src'
 
diff --git a/test/checkbox.test.tsx b/test/checkbox.test.tsx
index 1f4f90de..a856b758 100644
--- a/test/checkbox.test.tsx
+++ b/test/checkbox.test.tsx
@@ -1,5 +1,4 @@
 import { mount, shallow } from 'enzyme'
-import * as React from 'react'
 import FormCheck from 'react-bootstrap/FormCheck'
 import * as sinon from 'sinon'
 
diff --git a/test/datetimepicker.test.tsx b/test/datetimepicker.test.tsx
index 8288acd2..6c9c4340 100644
--- a/test/datetimepicker.test.tsx
+++ b/test/datetimepicker.test.tsx
@@ -1,5 +1,4 @@
 import { shallow, mount } from 'enzyme'
-import React from 'react'
 import DatePicker from 'react-datepicker'
 import * as sinon from 'sinon'
 
diff --git a/test/dropdown.test.tsx b/test/dropdown.test.tsx
index c4153d4f..bd949721 100644
--- a/test/dropdown.test.tsx
+++ b/test/dropdown.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import DropdownButton from 'react-bootstrap/DropdownButton'
 
 import { Dropdown } from '../src'
diff --git a/test/icon.test.tsx b/test/icon.test.tsx
index 03fb7888..6d87d3a7 100644
--- a/test/icon.test.tsx
+++ b/test/icon.test.tsx
@@ -1,6 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { shallow, mount } from 'enzyme'
-import * as React from 'react'
 import sinon from 'sinon'
 
 import { Icon } from '../src'
diff --git a/test/image.test.tsx b/test/image.test.tsx
index 662e276e..cdacbe87 100644
--- a/test/image.test.tsx
+++ b/test/image.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import BootstrapImage from 'react-bootstrap/Image'
 
 import { Image } from '../src'
diff --git a/test/label.test.tsx b/test/label.test.tsx
index 72c5dade..6eb2c5b7 100644
--- a/test/label.test.tsx
+++ b/test/label.test.tsx
@@ -1,6 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import { FormLabel } from 'react-bootstrap'
 
 import { Label } from '../src'
diff --git a/test/layout.test.tsx b/test/layout.test.tsx
index 2e3b4b96..4fc42201 100644
--- a/test/layout.test.tsx
+++ b/test/layout.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import React from 'react'
 import bootstrapColumn from 'react-bootstrap/Col'
 import bootstrapContainer from 'react-bootstrap/Container'
 import bootstrapRow from 'react-bootstrap/Row'
diff --git a/test/linegraph.test.tsx b/test/linegraph.test.tsx
index b1c3aa1c..e1795212 100644
--- a/test/linegraph.test.tsx
+++ b/test/linegraph.test.tsx
@@ -1,5 +1,4 @@
 import { mount } from 'enzyme'
-import * as React from 'react'
 
 import { LineGraph } from '../src'
 
diff --git a/test/list.test.tsx b/test/list.test.tsx
index aa7a15bf..132f0083 100644
--- a/test/list.test.tsx
+++ b/test/list.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import { ListGroup } from 'react-bootstrap'
 
 import { List } from '../src'
diff --git a/test/listitem.test.tsx b/test/listitem.test.tsx
index b70ec1d4..4e1fb538 100644
--- a/test/listitem.test.tsx
+++ b/test/listitem.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import { ListGroupItem } from 'react-bootstrap'
 import * as sinon from 'sinon'
 
diff --git a/test/modal.test.tsx b/test/modal.test.tsx
index 8dd0e3f3..203a1598 100644
--- a/test/modal.test.tsx
+++ b/test/modal.test.tsx
@@ -1,5 +1,4 @@
 import { shallow, mount } from 'enzyme'
-import * as React from 'react'
 import BootstrapModal from 'react-bootstrap/Modal'
 import BootstrapModalHeader from 'react-bootstrap/ModalHeader'
 
diff --git a/test/navbar.test.tsx b/test/navbar.test.tsx
index 2467cfa7..d3b9265e 100644
--- a/test/navbar.test.tsx
+++ b/test/navbar.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import { Nav, Navbar as NavBarRB, NavDropdown, FormControl } from 'react-bootstrap'
 import * as sinon from 'sinon'
 
diff --git a/test/panel.test.tsx b/test/panel.test.tsx
index dcb03453..a5ed6005 100644
--- a/test/panel.test.tsx
+++ b/test/panel.test.tsx
@@ -1,5 +1,4 @@
 import { shallow, mount } from 'enzyme'
-import * as React from 'react'
 import { Card, Collapse } from 'react-bootstrap'
 
 import { Panel, Icon } from '../src'
diff --git a/test/piegraph.test.tsx b/test/piegraph.test.tsx
index 1d165479..d3805906 100644
--- a/test/piegraph.test.tsx
+++ b/test/piegraph.test.tsx
@@ -1,5 +1,4 @@
 import { mount } from 'enzyme'
-import * as React from 'react'
 
 import { PieGraph } from '../src'
 
diff --git a/test/pill.test.tsx b/test/pill.test.tsx
index 10325a69..1d7d61d1 100644
--- a/test/pill.test.tsx
+++ b/test/pill.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import { Badge } from 'react-bootstrap'
 
 import { Pill } from '../src'
diff --git a/test/radio.test.tsx b/test/radio.test.tsx
index 264ccd6d..88994984 100644
--- a/test/radio.test.tsx
+++ b/test/radio.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import { FormCheck } from 'react-bootstrap'
 import * as sinon from 'sinon'
 
diff --git a/test/richtext.test.tsx b/test/richtext.test.tsx
index 08a9f382..dd376d63 100644
--- a/test/richtext.test.tsx
+++ b/test/richtext.test.tsx
@@ -1,6 +1,5 @@
 import { Editor } from '@tinymce/tinymce-react'
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import { act } from 'react-dom/test-utils'
 
 import { RichText } from '../src'
diff --git a/test/select.test.tsx b/test/select.test.tsx
index b753ebb8..143a1cb0 100644
--- a/test/select.test.tsx
+++ b/test/select.test.tsx
@@ -1,5 +1,4 @@
 import { shallow, mount } from 'enzyme'
-import * as React from 'react'
 import { Typeahead as BootstrapTypeahead } from 'react-bootstrap-typeahead'
 
 import { Select } from '../src'
diff --git a/test/spinner.test.tsx b/test/spinner.test.tsx
index e87ba368..6b190f4c 100644
--- a/test/spinner.test.tsx
+++ b/test/spinner.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 import * as Spinners from 'react-spinners'
 
 import { Spinner } from '../src'
diff --git a/test/switch.test.tsx b/test/switch.test.tsx
index 39498446..edd98e9c 100644
--- a/test/switch.test.tsx
+++ b/test/switch.test.tsx
@@ -1,5 +1,4 @@
 import { mount } from 'enzyme'
-import * as React from 'react'
 import FormCheck from 'react-bootstrap/FormCheck'
 import * as sinon from 'sinon'
 
diff --git a/test/tab.test.tsx b/test/tab.test.tsx
index 8b48be0f..5bf7a45c 100644
--- a/test/tab.test.tsx
+++ b/test/tab.test.tsx
@@ -1,5 +1,4 @@
 import { shallow, mount } from 'enzyme'
-import * as React from 'react'
 import * as sinon from 'sinon'
 
 import { Tab, TabsHeader, Icon } from '../src'
diff --git a/test/table.test.tsx b/test/table.test.tsx
index 03ab355c..1cc044a3 100644
--- a/test/table.test.tsx
+++ b/test/table.test.tsx
@@ -1,5 +1,4 @@
 import { mount } from 'enzyme'
-import * as React from 'react'
 import { Button } from 'react-bootstrap'
 
 import { Table } from '../src'
diff --git a/test/textfield.test.tsx b/test/textfield.test.tsx
index 64741ded..dcbed499 100644
--- a/test/textfield.test.tsx
+++ b/test/textfield.test.tsx
@@ -1,5 +1,4 @@
 import { mount } from 'enzyme'
-import * as React from 'react'
 import * as sinon from 'sinon'
 
 import { TextField } from '../src'
diff --git a/test/textinput.test.tsx b/test/textinput.test.tsx
index d61116a0..a2aceb91 100644
--- a/test/textinput.test.tsx
+++ b/test/textinput.test.tsx
@@ -1,5 +1,4 @@
 import { mount } from 'enzyme'
-import * as React from 'react'
 import Form from 'react-bootstrap/Form'
 import * as sinon from 'sinon'
 
diff --git a/test/toaster.test.tsx b/test/toaster.test.tsx
index 81d29476..7ef287ca 100644
--- a/test/toaster.test.tsx
+++ b/test/toaster.test.tsx
@@ -1,5 +1,4 @@
 import { mount } from 'enzyme'
-import * as React from 'react'
 
 import { Toaster, Toast } from '../src'
 
diff --git a/test/typeahead.test.tsx b/test/typeahead.test.tsx
index d27dd0ac..bcdc2c3b 100644
--- a/test/typeahead.test.tsx
+++ b/test/typeahead.test.tsx
@@ -1,5 +1,4 @@
 import { shallow, mount } from 'enzyme'
-import React from 'react'
 import { AsyncTypeahead } from 'react-bootstrap-typeahead'
 import { act } from 'react-dom/test-utils'
 
diff --git a/test/typography.test.tsx b/test/typography.test.tsx
index 611c6f3e..f9795f5d 100644
--- a/test/typography.test.tsx
+++ b/test/typography.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import * as React from 'react'
 
 import { Typography } from '../src'
 
diff --git a/test/videoplayer.test.tsx b/test/videoplayer.test.tsx
index f8de14a8..623fd362 100644
--- a/test/videoplayer.test.tsx
+++ b/test/videoplayer.test.tsx
@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme'
-import React from 'react'
 import { Player, ControlBar, ReplayControl } from 'video-react'
 
 import { VideoPlayer } from '../src'
diff --git a/tsconfig.json b/tsconfig.json
index 0ce1e239..9a15aa27 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,7 +29,7 @@
     "noFallthroughCasesInSwitch": true,
     "forceConsistentCasingInFileNames": true,
     "importHelpers": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "baseUrl": "./",
     "paths": {
       "@hospitalrun/components": [