diff --git a/app/spiffworkflow/DataObject/propertiesPanel/DataObjectSelect.jsx b/app/spiffworkflow/DataObject/propertiesPanel/DataObjectSelect.jsx
index 2db1a39..61898cd 100644
--- a/app/spiffworkflow/DataObject/propertiesPanel/DataObjectSelect.jsx
+++ b/app/spiffworkflow/DataObject/propertiesPanel/DataObjectSelect.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useService } from 'bpmn-js-properties-panel';
 import { SelectEntry } from '@bpmn-io/properties-panel';
 import { findDataObjects } from '../DataObjectHelpers';
@@ -24,59 +25,63 @@ export function DataObjectSelect(props) {
   const commandStack = props.commandStack;
   const debounce = useService('debounceInput');
 
-
   const getValue = () => {
-    return element.businessObject.dataObjectRef.id
-  }
+    return element.businessObject.dataObjectRef.id;
+  };
 
-  const setValue = value => {
+  const setValue = (value) => {
     const businessObject = element.businessObject;
-    const dataObjects = findDataObjects(businessObject.$parent)
+    const dataObjects = findDataObjects(businessObject.$parent);
     for (const dataObject of dataObjects) {
       if (dataObject.$type === 'bpmn:DataObject' && dataObject.id === value) {
-
         commandStack.execute('element.updateModdleProperties', {
           element: element,
           moddleElement: businessObject,
           properties: {
-            dataObjectRef: dataObject
-          }
+            dataObjectRef: dataObject,
+          },
         });
 
         // Construct the new name by : the dataObject name and the current state
-        const stateName = businessObject.dataState && businessObject.dataState.name ? businessObject.dataState.name : '';
-        const newName = stateName ? `${dataObject.name} [${stateName}]` : dataObject.name;
+        const stateName =
+          businessObject.dataState && businessObject.dataState.name
+            ? businessObject.dataState.name
+            : '';
+        const newName = stateName
+          ? `${dataObject.name} [${stateName}]`
+          : dataObject.name;
         // Update the name property of the DataObjectReference
         commandStack.execute('element.updateProperties', {
           element: element,
           properties: {
-            name: newName
-          }
+            name: newName,
+          },
         });
       }
     }
-  }
+  };
 
-  const getOptions = value => {
+  const getOptions = (value) => {
     const businessObject = element.businessObject;
     const parent = businessObject.$parent;
     let dataObjects = findDataObjects(parent);
     let options = [];
-    dataObjects.forEach(dataObj => {
-      options.push({ label: dataObj.id, value: dataObj.id })
+    dataObjects.forEach((dataObj) => {
+      options.push({ label: dataObj.id, value: dataObj.id });
     });
     return options;
-  }
-
-  return <SelectEntry
-    id={'selectDataObject'}
-    element={element}
-    description={"Select the Data Object this represents."}
-    label={"Which Data Object does this reference?"}
-    getValue={getValue}
-    setValue={setValue}
-    getOptions={getOptions}
-    debounce={debounce}
-  />;
+  };
 
+  return (
+    <SelectEntry
+      id={'selectDataObject'}
+      element={element}
+      description={'Select the Data Object this represents.'}
+      label={'Which Data Object does this reference?'}
+      getValue={getValue}
+      setValue={setValue}
+      getOptions={getOptions}
+      debounce={debounce}
+    />
+  );
 }
diff --git a/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.jsx b/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.jsx
index 13f5bfe..a45a993 100644
--- a/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.jsx
+++ b/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   ListGroup,
   CheckboxEntry,
diff --git a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionCheckboxEntry.jsx b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionCheckboxEntry.jsx
index d1065c8..8c82d59 100644
--- a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionCheckboxEntry.jsx
+++ b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionCheckboxEntry.jsx
@@ -1,36 +1,38 @@
-import {useService } from 'bpmn-js-properties-panel';
-import {CheckboxEntry} from '@bpmn-io/properties-panel';
-import {
-  getExtensionValue, setExtensionValue
-} from '../extensionHelpers';
+import React from 'react';
 
+import { CheckboxEntry } from '@bpmn-io/properties-panel';
+import { useService } from 'bpmn-js-properties-panel';
+import { getExtensionValue, setExtensionValue } from '../extensionHelpers';
 
 /**
  * A generic properties' editor for text area.
  */
 export function SpiffExtensionCheckboxEntry(props) {
   const element = props.element;
-  const commandStack = props.commandStack, moddle = props.moddle;
-  const name = props.name, label = props.label, description = props.description;
+  const commandStack = props.commandStack,
+    moddle = props.moddle;
+  const name = props.name,
+    label = props.label,
+    description = props.description;
   const debounce = useService('debounceInput');
 
   const getValue = () => {
-    return getExtensionValue(element.businessObject, name)
-  }
-
-  const setValue = value => {
-    setExtensionValue(element, name, value, moddle, commandStack)
+    return getExtensionValue(element.businessObject, name);
   };
 
-  return <CheckboxEntry
-    id={'extension_' + name}
-    element={element}
-    description={description}
-    label={label}
-    getValue={getValue}
-    setValue={setValue}
-    debounce={debounce}
-  />;
+  const setValue = (value) => {
+    setExtensionValue(element, name, value, moddle, commandStack);
+  };
 
+  return (
+    <CheckboxEntry
+      id={'extension_' + name}
+      element={element}
+      description={description}
+      label={label}
+      getValue={getValue}
+      setValue={setValue}
+      debounce={debounce}
+    />
+  );
 }
-
diff --git a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextArea.jsx b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextArea.jsx
index 7b72027..506d693 100644
--- a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextArea.jsx
+++ b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextArea.jsx
@@ -1,35 +1,37 @@
-import {useService } from 'bpmn-js-properties-panel';
-import {TextAreaEntry, TextFieldEntry} from '@bpmn-io/properties-panel';
-import {
-  getExtensionValue, setExtensionValue
-} from '../extensionHelpers';
-
+import React from 'react';
+import { useService } from 'bpmn-js-properties-panel';
+import { TextAreaEntry, TextFieldEntry } from '@bpmn-io/properties-panel';
+import { getExtensionValue, setExtensionValue } from '../extensionHelpers';
 
 /**
  * A generic properties' editor for text area.
  */
 export function SpiffExtensionTextArea(props) {
   const element = props.element;
-  const commandStack = props.commandStack, moddle = props.moddle;
-  const name = props.name, label = props.label, description = props.description;
+  const commandStack = props.commandStack,
+    moddle = props.moddle;
+  const name = props.name,
+    label = props.label,
+    description = props.description;
   const debounce = useService('debounceInput');
 
   const getValue = () => {
-    return getExtensionValue(element.businessObject, name)
-  }
-
-  const setValue = value => {
-    setExtensionValue(element, name, value, moddle, commandStack)
+    return getExtensionValue(element.businessObject, name);
   };
 
-  return <TextAreaEntry
-    id={'extension_' + name}
-    element={element}
-    description={description}
-    label={label}
-    getValue={getValue}
-    setValue={setValue}
-    debounce={debounce}
-  />;
+  const setValue = (value) => {
+    setExtensionValue(element, name, value, moddle, commandStack);
+  };
 
+  return (
+    <TextAreaEntry
+      id={'extension_' + name}
+      element={element}
+      description={description}
+      label={label}
+      getValue={getValue}
+      setValue={setValue}
+      debounce={debounce}
+    />
+  );
 }
diff --git a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextInput.jsx b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextInput.jsx
index dbe765d..7ec02fa 100644
--- a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextInput.jsx
+++ b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextInput.jsx
@@ -1,9 +1,7 @@
-import {useService } from 'bpmn-js-properties-panel';
+import React from 'react';
+import { useService } from 'bpmn-js-properties-panel';
 import { TextFieldEntry } from '@bpmn-io/properties-panel';
-import {
-  getExtensionValue, setExtensionValue
-} from '../extensionHelpers';
-
+import { getExtensionValue, setExtensionValue } from '../extensionHelpers';
 
 /**
  * A generic properties' editor for text input.
@@ -21,25 +19,41 @@ import {
  * @returns {string|null|*}
  */
 export function SpiffExtensionTextInput(props) {
-  const { element, commandStack, moddle, name, label, description, businessObject } = props;
+  const {
+    element,
+    commandStack,
+    moddle,
+    name,
+    label,
+    description,
+    businessObject,
+  } = props;
   const debounce = useService('debounceInput');
 
   const getValue = () => {
-    return getExtensionValue(businessObject, name)
-  }
-
-  const setValue = value => {
-    setExtensionValue(element, name, value, moddle, commandStack, businessObject)
+    return getExtensionValue(businessObject, name);
   };
 
-  return <TextFieldEntry
-    id={'extension_' + name}
-    element={element}
-    description={description}
-    label={label}
-    getValue={getValue}
-    setValue={setValue}
-    debounce={debounce}
-  />;
+  const setValue = (value) => {
+    setExtensionValue(
+      element,
+      name,
+      value,
+      moddle,
+      commandStack,
+      businessObject,
+    );
+  };
 
+  return (
+    <TextFieldEntry
+      id={'extension_' + name}
+      element={element}
+      description={description}
+      label={label}
+      getValue={getValue}
+      setValue={setValue}
+      debounce={debounce}
+    />
+  );
 }
diff --git a/app/spiffworkflow/messages/propertiesPanel/MessagePayload.jsx b/app/spiffworkflow/messages/propertiesPanel/MessagePayload.jsx
index 106a5c1..4481f16 100644
--- a/app/spiffworkflow/messages/propertiesPanel/MessagePayload.jsx
+++ b/app/spiffworkflow/messages/propertiesPanel/MessagePayload.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useService } from 'bpmn-js-properties-panel';
 import { TextAreaEntry } from '@bpmn-io/properties-panel';
 import { getMessageElementForShapeElement } from '../MessageHelpers';
@@ -37,11 +38,11 @@ export function MessagePayload(props) {
     let messagePayloadObject = getMessagePayloadObject();
     if (!messagePayloadObject) {
       messagePayloadObject = messageElement.$model.create(
-        'spiffworkflow:MessagePayload'
+        'spiffworkflow:MessagePayload',
       );
       if (!messageElement.extensionElements) {
         messageElement.extensionElements = messageElement.$model.create(
-          'bpmn:ExtensionElements'
+          'bpmn:ExtensionElements',
         );
       }
       messageElement.extensionElements.get('values').push(messagePayloadObject);
diff --git a/app/spiffworkflow/messages/propertiesPanel/MessageSelect.jsx b/app/spiffworkflow/messages/propertiesPanel/MessageSelect.jsx
index e6a171f..0777616 100644
--- a/app/spiffworkflow/messages/propertiesPanel/MessageSelect.jsx
+++ b/app/spiffworkflow/messages/propertiesPanel/MessageSelect.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useService } from 'bpmn-js-properties-panel';
 import { SelectEntry } from '@bpmn-io/properties-panel';
 import {