diff --git a/src/components/MediaOverlay/Media/Media.js b/src/components/MediaOverlay/Media/Media.js
index 875d46d..ea3d58b 100644
--- a/src/components/MediaOverlay/Media/Media.js
+++ b/src/components/MediaOverlay/Media/Media.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
+import React, { useContext } from 'react';
 import MediaOverlayContext from '../MediaOverlay.context';
 import DefaultAudio from './DefaultAudio/DefaultAudio';
 import DefaultImage from './DefaultImage/DefaultImage';
@@ -7,40 +7,40 @@ import DefaultInteractive from './DefaultInteractive/DefaultInteractive';
 import DefaultVideo from './DefaultVideo/DefaultVideo';
 import './Media.module.scss';
 
-const Media = () => (
-  <MediaOverlayContext.Consumer>
-    {({
-      overlayState: { assembly },
-      overlayProps: {
-        videoPlayerId,
-        generatePrerollUrl,
-        audioComponent: Audio = DefaultAudio,
-        imageComponent: Image = DefaultImage,
-        interactiveComponent: Interactive = DefaultInteractive,
-        videoComponent: Video = DefaultVideo,
-      },
-      hideSidebarAndControls,
-      overlayRef,
-      showSidebarAndControls,
-    }) => (
-      <>
-        {assembly.audio && <Audio filename={assembly.audio.filename} />}
-        {assembly.image && <Image {...assembly.image} lazyContainer={overlayRef.current} />}
-        {assembly.interactive && <Interactive {...assembly.interactive} />}
-        {assembly.video && (
-          <Video
-            assembly={assembly}
-            playerId={videoPlayerId}
-            onPlay={hideSidebarAndControls}
-            onPause={showSidebarAndControls}
-            onDisplayClick={hideSidebarAndControls}
-            generatePrerollUrl={generatePrerollUrl}
-          />
-        )}
-      </>
-    )}
-  </MediaOverlayContext.Consumer>
-);
+const Media = () => {
+  const {
+    overlayState: { assembly },
+    overlayProps: {
+      videoPlayerId,
+      generatePrerollUrl,
+      audioComponent: Audio = DefaultAudio,
+      imageComponent: Image = DefaultImage,
+      interactiveComponent: Interactive = DefaultInteractive,
+      videoComponent: Video = DefaultVideo,
+    },
+    hideSidebarAndControls,
+    overlayRef,
+    showSidebarAndControls,
+  } = useContext(MediaOverlayContext);
+
+  return (
+    <>
+      {assembly.audio && <Audio filename={assembly.audio.filename} />}
+      {assembly.image && <Image {...assembly.image} lazyContainer={overlayRef.current} />}
+      {assembly.interactive && <Interactive {...assembly.interactive} />}
+      {assembly.video && (
+      <Video
+        assembly={assembly}
+        playerId={videoPlayerId}
+        onPlay={hideSidebarAndControls}
+        onPause={showSidebarAndControls}
+        onDisplayClick={hideSidebarAndControls}
+        generatePrerollUrl={generatePrerollUrl}
+      />
+      )}
+    </>
+  );
+};
 
 Media.propTypes = {
   assemblyId: PropTypes.number,
diff --git a/src/components/MediaOverlay/MediaViewer/MediaViewer.js b/src/components/MediaOverlay/MediaViewer/MediaViewer.js
index 3bf7e77..c1c8a67 100644
--- a/src/components/MediaOverlay/MediaViewer/MediaViewer.js
+++ b/src/components/MediaOverlay/MediaViewer/MediaViewer.js
@@ -23,9 +23,9 @@ const MediaViewer = () => {
       onSwipeRight={navigatePreviousMedia}
       className={classNames(styles.MediaViewer, { controlsHidden })}
     >
-      {hasError ? <Fragment>{localeLabels.ERROR}</Fragment> : <Media />}
+      {hasError ? localeLabels.ERROR : <Media />}
       {assemblies.length > 1 && !controlsHidden && (
-        <Fragment>
+        <>
           {mediaIndex > 0 && (
             <MediaLink
               assemblyId={assemblies[mediaIndex - 1].assemblyId}
@@ -42,7 +42,7 @@ const MediaViewer = () => {
               <FontAwesomeIcon icon={faAngleRight} size="3x" />
             </MediaLink>
           )}
-        </Fragment>
+        </>
       )}
     </Taparoo>
   );