diff --git a/__tests__/integration/mirador/plugins/add.html b/__tests__/integration/mirador/plugins/add.html
index fd3cd963109d415c3cd13ba1190698ab408bc861..d2dc92960a44ba00b9a3b5429f7160e27cf4263b 100644
--- a/__tests__/integration/mirador/plugins/add.html
+++ b/__tests__/integration/mirador/plugins/add.html
@@ -61,7 +61,7 @@
         config: {
           foo: 'bar',
         },
-        component: AddPluginComponentA,
+        component: <AddPluginComponentA />,
       };
 
       const addPluginB = {
diff --git a/src/components/PluginHook.js b/src/components/PluginHook.js
index bdfcb325c179b88262320ee513af68b6b14a90dc..5c16c579c4626486181a9b7c523ce366eaadf7b8 100644
--- a/src/components/PluginHook.js
+++ b/src/components/PluginHook.js
@@ -6,11 +6,15 @@ export const PluginHook = React.forwardRef((props, ref) => {
   const { classes, ...otherProps } = props; // eslint-disable-line react/prop-types
   return PluginComponents ? (
     PluginComponents.map((PluginComponent, index) => ( // eslint-disable-line react/prop-types
-      <PluginComponent
-        ref={ref}
-        {...otherProps}
-        key={index} // eslint-disable-line react/no-array-index-key
-      />
+      React.isValidElement(PluginComponent)
+        ? React.cloneElement(PluginComponent, { ...otherProps, ref })
+        : (
+          <PluginComponent
+            ref={ref}
+            {...otherProps}
+            key={index} // eslint-disable-line react/no-array-index-key
+          />
+        )
     ))
   ) : null;
 });