diff --git a/packages/netlify-cms-core/package.json b/packages/netlify-cms-core/package.json
index e91ee89c..92f43f12 100644
--- a/packages/netlify-cms-core/package.json
+++ b/packages/netlify-cms-core/package.json
@@ -92,6 +92,7 @@
     "react-immutable-proptypes": "^2.1.0"
   },
   "devDependencies": {
+    "@types/react-scroll-sync": "0.8.4",
     "@types/history": "^4.7.8",
     "@types/react": "18.0.20",
     "@types/redux-mock-store": "^1.0.2",
diff --git a/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreview.js b/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreview.js
index 35bf04d7..ffced1cc 100644
--- a/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreview.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreview.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
-import { ScrollSyncPane } from 'react-scroll-sync';
 
 function isVisible(field) {
   return field.get('widget') !== 'hidden';
@@ -27,13 +26,11 @@ export default class Preview extends React.Component {
       return null;
     }
     return (
-      <ScrollSyncPane>
         <PreviewContainer>
           {fields.filter(isVisible).map(field => (
             <div key={field.get('name')}>{widgetFor(field.get('name'))}</div>
           ))}
         </PreviewContainer>
-      </ScrollSyncPane>
     );
   }
 }
diff --git a/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx b/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx
index de15e261..90583f21 100644
--- a/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx
+++ b/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { CmsWidgetPreviewProps } from 'netlify-cms-core';
 import React, { ComponentType, ReactNode, useMemo } from 'react';
 import ReactDOM from 'react-dom';
+import { ScrollSyncPane } from 'react-scroll-sync';
 
 interface PreviewContentProps {
   previewComponent?:
@@ -39,7 +40,9 @@ const PreviewContent = ({ previewComponent, previewProps }: PreviewContentProps)
     }
 
     return ReactDOM.createPortal(
-      <StyledPreviewContent className="preview-content">{children}</StyledPreviewContent>,
+      <ScrollSyncPane>
+        <StyledPreviewContent className="preview-content">{children}</StyledPreviewContent>
+      </ScrollSyncPane>,
       element,
     );
   }, [previewComponent, previewProps, element]);
diff --git a/yarn.lock b/yarn.lock
index 438b71bc..4cfda100 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3697,6 +3697,13 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-scroll-sync@0.8.4":
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/@types/react-scroll-sync/-/react-scroll-sync-0.8.4.tgz#6caa894cb0bf87c205508474d902ce43e433dd7d"
+  integrity sha512-88N2vgZdVqlwr5ayH/5GNAAjfdlzhted/qPTyXgT/DzQwsuIWkwFpZtoOhyGCRmxUC3w5wA+ZhkpbzagIXWNaQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-syntax-highlighter@11.0.4":
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"