diff --git a/samples/react-chartcontrol/README.md b/samples/react-chartcontrol/README.md
index 082e8d2d5..a85620781 100644
--- a/samples/react-chartcontrol/README.md
+++ b/samples/react-chartcontrol/README.md
@@ -194,7 +194,7 @@ There are no pre-requisites to use these samples.
 
 Solution|Author(s)
 --------|---------
-react-chart-control | Hugo Bernier ([Tahoe Ninjas](http://tahoeninjas.blog), @bernierh)
+react-chart-control | Hugo Bernier ([Tahoe Ninjas](http://tahoeninjas.blog), [@bernierh](https://twitter.com/bernierh))
 
 ## Version history
 
@@ -204,6 +204,7 @@ Version|Date|Comments
 1.1|July 02, 2020|Upgraded to SPFx 1.10.0
 1.2|December 04, 2020|Upgraded to SPFx 1.11.0 and Fluent UI 7.x
 1.3|December 13, 2020|Upgraded dependencies
+1.4|February 25, 2021|Updated to latest version of PnP controls
 
 ## Disclaimer
 
diff --git a/samples/react-chartcontrol/config/package-solution.json b/samples/react-chartcontrol/config/package-solution.json
index c8f4f2c72..0a83f62f2 100644
--- a/samples/react-chartcontrol/config/package-solution.json
+++ b/samples/react-chartcontrol/config/package-solution.json
@@ -3,7 +3,7 @@
   "solution": {
     "name": "react-chartcontrol-client-side-solution",
     "id": "fb9665fb-4455-4b7f-99ab-2195920871fd",
-    "version": "1.3.0.0",
+    "version": "1.4.0.0",
     "includeClientSideAssets": true,
     "developer": {
       "name": "Contoso",
diff --git a/samples/react-chartcontrol/package.json b/samples/react-chartcontrol/package.json
index c50c56a6d..86c4b2f9a 100644
--- a/samples/react-chartcontrol/package.json
+++ b/samples/react-chartcontrol/package.json
@@ -1,7 +1,7 @@
 {
   "main": "lib/index.js",
   "name": "react-chartcontrol",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
diff --git a/samples/react-chartcontrol/src/webparts/accessibleTable/AccessibleTableWebPart.ts b/samples/react-chartcontrol/src/webparts/accessibleTable/AccessibleTableWebPart.ts
index f6af84ed3..c047c79b4 100644
--- a/samples/react-chartcontrol/src/webparts/accessibleTable/AccessibleTableWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/accessibleTable/AccessibleTableWebPart.ts
@@ -18,7 +18,7 @@ export interface IAccessibleTableWebPartProps {
   datasetlabel: string;
 }
 
-export class AccessibleTableWebPart extends BaseClientSideWebPart<IAccessibleTableWebPartProps> {
+export default class AccessibleTableWebPart extends BaseClientSideWebPart<IAccessibleTableWebPartProps> {
    public render(): void {
     const element: React.ReactElement<IAccessibleTableProps> = React.createElement(
       AccessibleTable,
diff --git a/samples/react-chartcontrol/src/webparts/areaChartDemo/AreaChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/areaChartDemo/AreaChartDemoWebPart.ts
index 7279400e9..911bf767e 100644
--- a/samples/react-chartcontrol/src/webparts/areaChartDemo/AreaChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/areaChartDemo/AreaChartDemoWebPart.ts
@@ -13,7 +13,7 @@ export interface IAreaChartDemoWebPartProps {
   description: string;
 }
 
-export class AreaChartDemoWebPart extends BaseClientSideWebPart<IAreaChartDemoWebPartProps> {
+export default class AreaChartDemoWebPart extends BaseClientSideWebPart<IAreaChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IAreaChartDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/barChartDemo/BarChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/barChartDemo/BarChartDemoWebPart.ts
index ac47b3640..7933ea5aa 100644
--- a/samples/react-chartcontrol/src/webparts/barChartDemo/BarChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/barChartDemo/BarChartDemoWebPart.ts
@@ -17,7 +17,7 @@ export interface IBarChartDemoWebPartProps {
  * and rendering the chart once the data has been retrieved.
  * To keep the demo simple, we don't specify custom colors.
  */
-export  class BarChartDemoWebPart extends BaseClientSideWebPart<IBarChartDemoWebPartProps> {
+export default class BarChartDemoWebPart extends BaseClientSideWebPart<IBarChartDemoWebPartProps> {
 
   public render(): void {
 
diff --git a/samples/react-chartcontrol/src/webparts/barChartStatic/BarChartStaticWebPart.ts b/samples/react-chartcontrol/src/webparts/barChartStatic/BarChartStaticWebPart.ts
index a858ed90d..a6031e245 100644
--- a/samples/react-chartcontrol/src/webparts/barChartStatic/BarChartStaticWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/barChartStatic/BarChartStaticWebPart.ts
@@ -12,7 +12,7 @@ export interface IBarChartStaticWebPartProps {
   description: string;
 }
 
-export class BarChartStaticWebPart extends BaseClientSideWebPart<IBarChartStaticWebPartProps> {
+export default class BarChartStaticWebPart extends BaseClientSideWebPart<IBarChartStaticWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IBarChartStaticProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/BubbleChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/BubbleChartDemoWebPart.ts
index 527f0f91c..e081a1502 100644
--- a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/BubbleChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/BubbleChartDemoWebPart.ts
@@ -13,7 +13,7 @@ export interface IBubbleChartDemoWebPartProps {
   description: string;
 }
 
-export  class BubbleChartDemoWebPart extends BaseClientSideWebPart<IBubbleChartDemoWebPartProps> {
+export default class BubbleChartDemoWebPart extends BaseClientSideWebPart<IBubbleChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IBubbleChartDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
index a2670c1c7..d793ec38c 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
@@ -68,7 +68,7 @@ const DEFAULT_CIRCUMFERENCE: number = 100;
 const DEFAULT_CHARTROTATION: number = -180;
 const DEFAULT_POINTRADIUS = 3;
 
-export class ChartinatorWebPart extends BaseClientSideWebPart<IChartinatorWebPartProps> {
+export default class ChartinatorWebPart extends BaseClientSideWebPart<IChartinatorWebPartProps> {
   private _fields: IListField[];
 
   /**
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx
index ee352625a..f36eb117a 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx
@@ -35,7 +35,7 @@ export class NumberTextField extends React.Component<INumberTextFieldProps, INum
    * @param value the value
    */
   private _validateNumber(value: string): string {
-    return isNaN(Number(value)) ? strings.NumberErrorMessage : '';
+    return value !== '' && value !== undefined && isNaN(Number(value)) ? strings.NumberErrorMessage : '';
   }
 
   /**
diff --git a/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts
index 3a3d295db..1f64590b4 100644
--- a/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts
@@ -13,7 +13,7 @@ export interface IComboChartDemoWebPartProps {
   description: string;
 }
 
-export  class ComboChartDemoWebPart extends BaseClientSideWebPart<IComboChartDemoWebPartProps> {
+export default class ComboChartDemoWebPart extends BaseClientSideWebPart<IComboChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IComboChartDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts
index 7ea3deb42..f934a9d10 100644
--- a/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts
@@ -13,7 +13,7 @@ export interface ICustomPluginDemoWebPartProps {
   description: string;
 }
 
-export  class CustomPluginDemoWebPart extends BaseClientSideWebPart<ICustomPluginDemoWebPartProps> {
+export default class CustomPluginDemoWebPart extends BaseClientSideWebPart<ICustomPluginDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<ICustomPluginDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts
index a782da010..77ef7b300 100644
--- a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts
@@ -14,7 +14,7 @@ export interface IDonutPatternsDemoWebPartProps {
   description: string;
 }
 
-export class DonutPatternsDemoWebPart extends BaseClientSideWebPart<IDonutPatternsDemoWebPartProps> {
+export default class DonutPatternsDemoWebPart extends BaseClientSideWebPart<IDonutPatternsDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IDonutPatternsDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts
index 5f408fd46..24194473a 100644
--- a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts
@@ -20,7 +20,7 @@ export interface IDynamicDataCallableWebPartProps {
   repo: string;
 }
 
-export  class DynamicDataCallableWebPart extends BaseClientSideWebPart<IDynamicDataCallableWebPartProps>  implements IDynamicDataCallables {
+export default class DynamicDataCallableWebPart extends BaseClientSideWebPart<IDynamicDataCallableWebPartProps>  implements IDynamicDataCallables {
   /** the last selected contributor */
   private _selectedContributor: IContributor;
 
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
index 7a39cc2b3..5066177fc 100644
--- a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
@@ -43,7 +43,7 @@ export interface IDynamicDataConsumerWebPartProps {
   repoOwner: string;
 }
 
-export class DynamicDataConsumerWebPart extends BaseClientSideWebPart<IDynamicDataConsumerWebPartProps> {
+export default class DynamicDataConsumerWebPart extends BaseClientSideWebPart<IDynamicDataConsumerWebPartProps> {
 
   public render(): void {
     const { repo,
@@ -82,10 +82,6 @@ export class DynamicDataConsumerWebPart extends BaseClientSideWebPart<IDynamicDa
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts
index ae93966c3..1c26f08ef 100644
--- a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts
@@ -12,7 +12,7 @@ export interface IHorizontalBarDemoWebPartProps {
   description: string;
 }
 
-export  class HorizontalBarDemoWebPart extends BaseClientSideWebPart<IHorizontalBarDemoWebPartProps> {
+export default class HorizontalBarDemoWebPart extends BaseClientSideWebPart<IHorizontalBarDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IHorizontalBarDemoProps > = React.createElement(
@@ -29,10 +29,6 @@ export  class HorizontalBarDemoWebPart extends BaseClientSideWebPart<IHorizontal
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts
index e3fae99b7..bbcdd06ef 100644
--- a/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts
@@ -12,7 +12,7 @@ export interface ILineChartDemoWebPartProps {
   description: string;
 }
 
-export  class LineChartDemoWebPart extends BaseClientSideWebPart<ILineChartDemoWebPartProps> {
+export default class LineChartDemoWebPart extends BaseClientSideWebPart<ILineChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<ILineChartDemoProps > = React.createElement(
@@ -28,10 +28,6 @@ export  class LineChartDemoWebPart extends BaseClientSideWebPart<ILineChartDemoW
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts
index e6d78c866..5d13c695d 100644
--- a/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts
@@ -13,7 +13,7 @@ export interface IPieChartDemoWebPartProps {
   description: string;
 }
 
-export class PieChartDemoWebPart extends BaseClientSideWebPart<IPieChartDemoWebPartProps> {
+export default class PieChartDemoWebPart extends BaseClientSideWebPart<IPieChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IPieChartDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts
index dfe270279..0208bd046 100644
--- a/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts
@@ -13,7 +13,7 @@ export interface IPolarAreaDemoWebPartProps {
   description: string;
 }
 
-export  class PolarAreaDemoWebPart extends BaseClientSideWebPart<IPolarAreaDemoWebPartProps> {
+export default class PolarAreaDemoWebPart extends BaseClientSideWebPart<IPolarAreaDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IPolarAreaDemoProps > = React.createElement(
@@ -27,10 +27,6 @@ export  class PolarAreaDemoWebPart extends BaseClientSideWebPart<IPolarAreaDemoW
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts
index 3f449192a..5c4ddf0c4 100644
--- a/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts
@@ -13,7 +13,7 @@ export interface IRadarDemoWebPartProps {
   description: string;
 }
 
-export class RadarDemoWebPart extends BaseClientSideWebPart<IRadarDemoWebPartProps> {
+export default class RadarDemoWebPart extends BaseClientSideWebPart<IRadarDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IRadarDemoProps > = React.createElement(
@@ -27,10 +27,6 @@ export class RadarDemoWebPart extends BaseClientSideWebPart<IRadarDemoWebPartPro
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts
index 154006dad..d19de8e8b 100644
--- a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts
@@ -13,7 +13,7 @@ export interface IRealtimePluginDemoWebPartProps {
   description: string;
 }
 
-export class RealtimePluginDemoWebPart extends BaseClientSideWebPart<IRealtimePluginDemoWebPartProps> {
+export default class RealtimePluginDemoWebPart extends BaseClientSideWebPart<IRealtimePluginDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IRealtimePluginDemoProps > = React.createElement(
@@ -29,10 +29,6 @@ export class RealtimePluginDemoWebPart extends BaseClientSideWebPart<IRealtimePl
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts
index e6c2289a7..0ac6677a5 100644
--- a/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts
@@ -14,7 +14,7 @@ export interface IScatterChartDemoWebPartProps {
   description: string;
 }
 
-export class ScatterChartDemoWebPart extends BaseClientSideWebPart<IScatterChartDemoWebPartProps> {
+export default class ScatterChartDemoWebPart extends BaseClientSideWebPart<IScatterChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IScatterChartDemoProps > = React.createElement(
@@ -30,10 +30,6 @@ export class ScatterChartDemoWebPart extends BaseClientSideWebPart<IScatterChart
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [