diff --git a/README.md b/README.md
index f6272451..ae80f74c 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ document.body.appendChild(label.dom);
 If you'd like to include PCUI in your React project, you can import the individual components as follows:
 
 ```javascript
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { TextInput } from '@playcanvas/pcui/react';
 import '@playcanvas/pcui/styles';
diff --git a/docs/pages/2-react.markdown b/docs/pages/2-react.markdown
index 394795c6..9cf044f2 100644
--- a/docs/pages/2-react.markdown
+++ b/docs/pages/2-react.markdown
@@ -8,7 +8,7 @@ nav_order: 3
 If you are more familiar with React, you can import React elements into your own `.jsx` files and use them as follows:
 
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { TextInput } from '@playcanvas/pcui/react';
 import '@playcanvas/pcui/styles';
diff --git a/react/tsconfig.json b/react/tsconfig.json
index bba88b05..b67dd994 100644
--- a/react/tsconfig.json
+++ b/react/tsconfig.json
@@ -8,7 +8,6 @@
             "es2019",
             "dom"
         ],
-        "allowSyntheticDefaultImports" : true,
         "esModuleInterop" : true,
         "sourceMap": true,
         "moduleResolution": "node"
diff --git a/src/components/ArrayInput/index.stories.tsx b/src/components/ArrayInput/index.stories.tsx
index a85f84e4..0079fa19 100644
--- a/src/components/ArrayInput/index.stories.tsx
+++ b/src/components/ArrayInput/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/BooleanInput/index.stories.tsx b/src/components/BooleanInput/index.stories.tsx
index f64606f5..4e59abd6 100644
--- a/src/components/BooleanInput/index.stories.tsx
+++ b/src/components/BooleanInput/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/Button/component.tsx b/src/components/Button/component.tsx
index d0e7fe0f..292068af 100644
--- a/src/components/Button/component.tsx
+++ b/src/components/Button/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { ButtonArgs } from './index';
 import BaseComponent from '../Element/component';
 
diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx
index ab30dcb2..75af516a 100644
--- a/src/components/Button/index.stories.tsx
+++ b/src/components/Button/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Component from './component';
 import '../../scss/index.js';
 import { action } from '@storybook/addon-actions';
diff --git a/src/components/Canvas/component.tsx b/src/components/Canvas/component.tsx
index 1dddddaa..deeba902 100644
--- a/src/components/Canvas/component.tsx
+++ b/src/components/Canvas/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { CanvasArgs } from './index';
 import BaseComponent from '../Element/component';
 
diff --git a/src/components/Canvas/index.stories.tsx b/src/components/Canvas/index.stories.tsx
index 72cadd0f..9f41e59c 100644
--- a/src/components/Canvas/index.stories.tsx
+++ b/src/components/Canvas/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import CanvasComponent from './component';
 
diff --git a/src/components/Code/index.stories.tsx b/src/components/Code/index.stories.tsx
index 562efe5f..2724da33 100644
--- a/src/components/Code/index.stories.tsx
+++ b/src/components/Code/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/ColorPicker/component.tsx b/src/components/ColorPicker/component.tsx
index 47b7e652..89707868 100644
--- a/src/components/ColorPicker/component.tsx
+++ b/src/components/ColorPicker/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { ColorPickerArgs } from './index';
 import BaseComponent from '../Element/component';
 
diff --git a/src/components/ColorPicker/index.stories.tsx b/src/components/ColorPicker/index.stories.tsx
index d213b1ff..128ca716 100644
--- a/src/components/ColorPicker/index.stories.tsx
+++ b/src/components/ColorPicker/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import ColorPickerComponent from './component';
 
diff --git a/src/components/Container/component.tsx b/src/components/Container/component.tsx
index 925a27db..c29048b9 100644
--- a/src/components/Container/component.tsx
+++ b/src/components/Container/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { ContainerArgs } from './index';
 import BaseComponent from '../Element/component';
 
diff --git a/src/components/Container/index.stories.tsx b/src/components/Container/index.stories.tsx
index 50453178..2eca5430 100644
--- a/src/components/Container/index.stories.tsx
+++ b/src/components/Container/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Container from './component';
 import Label from '../Label/component';
diff --git a/src/components/Divider/index.stories.tsx b/src/components/Divider/index.stories.tsx
index 562efe5f..2724da33 100644
--- a/src/components/Divider/index.stories.tsx
+++ b/src/components/Divider/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/Element/component.tsx b/src/components/Element/component.tsx
index 483a6f31..f96a4e83 100644
--- a/src/components/Element/component.tsx
+++ b/src/components/Element/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { ElementArgs } from './index';
 
 /**
diff --git a/src/components/Element/index.ts b/src/components/Element/index.ts
index 9eb6991c..c9d7a822 100644
--- a/src/components/Element/index.ts
+++ b/src/components/Element/index.ts
@@ -1,5 +1,5 @@
 import { EventHandle, Events, Observer } from '@playcanvas/observer';
-import React from 'react';
+import * as React from 'react';
 import * as pcuiClass from '../../class';
 
 import { BindingBase } from '../../binding';
diff --git a/src/components/GradientPicker/component.tsx b/src/components/GradientPicker/component.tsx
index 4296bbe5..63a54134 100644
--- a/src/components/GradientPicker/component.tsx
+++ b/src/components/GradientPicker/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { GradientPickerArgs } from './index';
 import BaseComponent from '../Element/component';
 
diff --git a/src/components/GradientPicker/index.stories.tsx b/src/components/GradientPicker/index.stories.tsx
index 47f6a687..a557902b 100644
--- a/src/components/GradientPicker/index.stories.tsx
+++ b/src/components/GradientPicker/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import GradientPickerComponent from './component';
 
diff --git a/src/components/GridView/component.tsx b/src/components/GridView/component.tsx
index 05944f43..d84de3df 100644
--- a/src/components/GridView/component.tsx
+++ b/src/components/GridView/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import GridViewElement, { GridViewArgs } from './index';
 import GridViewItemElement from '../GridViewItem/index';
 import BaseComponent from '../Element/component';
diff --git a/src/components/GridView/index.stories.tsx b/src/components/GridView/index.stories.tsx
index 3de89614..1594a881 100644
--- a/src/components/GridView/index.stories.tsx
+++ b/src/components/GridView/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import GridView from './component';
 import GridViewItem from '../GridViewItem/component';
diff --git a/src/components/InfoBox/component.tsx b/src/components/InfoBox/component.tsx
index 6d55bd09..2ccf5987 100644
--- a/src/components/InfoBox/component.tsx
+++ b/src/components/InfoBox/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { InfoBoxArgs } from './index';
 import BaseComponent from '../Element/component';
 
diff --git a/src/components/InfoBox/index.stories.tsx b/src/components/InfoBox/index.stories.tsx
index e2335bac..21c321a7 100644
--- a/src/components/InfoBox/index.stories.tsx
+++ b/src/components/InfoBox/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/Label/component.tsx b/src/components/Label/component.tsx
index 3f307576..22983e0b 100644
--- a/src/components/Label/component.tsx
+++ b/src/components/Label/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { LabelArgs } from './index';
 import BaseComponent from '../Element/component';
 
diff --git a/src/components/Label/index.stories.tsx b/src/components/Label/index.stories.tsx
index 4d1bbce1..fbd1b61e 100644
--- a/src/components/Label/index.stories.tsx
+++ b/src/components/Label/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/LabelGroup/index.stories.tsx b/src/components/LabelGroup/index.stories.tsx
index 4d689932..72aa7bc6 100644
--- a/src/components/LabelGroup/index.stories.tsx
+++ b/src/components/LabelGroup/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/Menu/component.tsx b/src/components/Menu/component.tsx
index 69b0d3da..be887b2d 100644
--- a/src/components/Menu/component.tsx
+++ b/src/components/Menu/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { MenuArgs } from './index';
 import BaseComponent from '../Element/component';
 
diff --git a/src/components/Menu/index.stories.tsx b/src/components/Menu/index.stories.tsx
index 7e8925a3..11df7f37 100644
--- a/src/components/Menu/index.stories.tsx
+++ b/src/components/Menu/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/NumericInput/index.stories.tsx b/src/components/NumericInput/index.stories.tsx
index b2a558e7..b867aa30 100644
--- a/src/components/NumericInput/index.stories.tsx
+++ b/src/components/NumericInput/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/Overlay/index.stories.tsx b/src/components/Overlay/index.stories.tsx
index 3b348247..934ce85c 100644
--- a/src/components/Overlay/index.stories.tsx
+++ b/src/components/Overlay/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Component from './component';
 import '../../scss/index.js';
 
diff --git a/src/components/Panel/component.tsx b/src/components/Panel/component.tsx
index 0c2cfc7c..5de37da6 100644
--- a/src/components/Panel/component.tsx
+++ b/src/components/Panel/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { PanelArgs } from './index';
 import BaseComponent from '../Element/component';
 
diff --git a/src/components/Panel/index.stories.tsx b/src/components/Panel/index.stories.tsx
index 2a3e521e..2b10b295 100644
--- a/src/components/Panel/index.stories.tsx
+++ b/src/components/Panel/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/Progress/index.stories.tsx b/src/components/Progress/index.stories.tsx
index 562efe5f..2724da33 100644
--- a/src/components/Progress/index.stories.tsx
+++ b/src/components/Progress/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/RadioButton/index.stories.tsx b/src/components/RadioButton/index.stories.tsx
index 4d0220a5..a24e887b 100644
--- a/src/components/RadioButton/index.stories.tsx
+++ b/src/components/RadioButton/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/SelectInput/index.stories.tsx b/src/components/SelectInput/index.stories.tsx
index b2a558e7..b867aa30 100644
--- a/src/components/SelectInput/index.stories.tsx
+++ b/src/components/SelectInput/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/SliderInput/index.stories.tsx b/src/components/SliderInput/index.stories.tsx
index 27c775b3..539a45eb 100644
--- a/src/components/SliderInput/index.stories.tsx
+++ b/src/components/SliderInput/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/Spinner/component.tsx b/src/components/Spinner/component.tsx
index 88f36b35..e36e5fbb 100644
--- a/src/components/Spinner/component.tsx
+++ b/src/components/Spinner/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Element, { SpinnerArgs } from './index';
 import BaseComponent from '../Element/component';
 
diff --git a/src/components/Spinner/index.stories.tsx b/src/components/Spinner/index.stories.tsx
index d59b1ed4..9ec8e260 100644
--- a/src/components/Spinner/index.stories.tsx
+++ b/src/components/Spinner/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import SpinnerComponent from './component';
 export default {
diff --git a/src/components/TextAreaInput/index.stories.tsx b/src/components/TextAreaInput/index.stories.tsx
index b2a558e7..b867aa30 100644
--- a/src/components/TextAreaInput/index.stories.tsx
+++ b/src/components/TextAreaInput/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/TextInput/index.stories.tsx b/src/components/TextInput/index.stories.tsx
index b2a558e7..b867aa30 100644
--- a/src/components/TextInput/index.stories.tsx
+++ b/src/components/TextInput/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/components/TreeView/component.tsx b/src/components/TreeView/component.tsx
index 42d9360f..196d28b6 100644
--- a/src/components/TreeView/component.tsx
+++ b/src/components/TreeView/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import TreeViewElement, { TreeViewArgs } from './index';
 import TreeViewItemElement from '../TreeViewItem/index';
 import BaseComponent from '../Element/component';
diff --git a/src/components/TreeView/index.stories.tsx b/src/components/TreeView/index.stories.tsx
index c0a2732b..bc72efbc 100644
--- a/src/components/TreeView/index.stories.tsx
+++ b/src/components/TreeView/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import TreeView from './component';
 import TreeViewItem from '../TreeViewItem/component';
diff --git a/src/components/VectorInput/index.stories.tsx b/src/components/VectorInput/index.stories.tsx
index b2a558e7..b867aa30 100644
--- a/src/components/VectorInput/index.stories.tsx
+++ b/src/components/VectorInput/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Component from './component';
 import '../../scss/index.js';
diff --git a/src/examples/BidirectionalBinding/index.stories.tsx b/src/examples/BidirectionalBinding/index.stories.tsx
index 03a576c2..5ff8d2dd 100644
--- a/src/examples/BidirectionalBinding/index.stories.tsx
+++ b/src/examples/BidirectionalBinding/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Observer } from '@playcanvas/observer';
 import Container from '../../components/Container/component';
diff --git a/src/examples/Observer/index.stories.tsx b/src/examples/Observer/index.stories.tsx
index 6fb92e10..0db3ab8b 100644
--- a/src/examples/Observer/index.stories.tsx
+++ b/src/examples/Observer/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Observer } from '@playcanvas/observer';
 import Container from '../../components/Container/component';
diff --git a/tsconfig.json b/tsconfig.json
index b05ccc82..0050c3ee 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,6 @@
             "es2019",
             "dom"
         ],
-        "allowSyntheticDefaultImports" : true,
         "esModuleInterop" : true,
         "sourceMap": true,
         "moduleResolution": "node"