diff --git a/beta/package.json b/beta/package.json
index a6c6bedb0b9..394c6085f9f 100644
--- a/beta/package.json
+++ b/beta/package.json
@@ -20,7 +20,7 @@
"postinstall": "is-ci || (cd .. && husky install beta/.husky)"
},
"dependencies": {
- "@codesandbox/sandpack-react": "^0.1.20",
+ "@codesandbox/sandpack-react": "0.3.8-alpha.4",
"@docsearch/css": "3.0.0-alpha.41",
"@docsearch/react": "3.0.0-alpha.41",
"@headlessui/react": "^1.3.0",
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
index c4b72601fc4..26cb184a622 100644
--- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -8,9 +8,10 @@ import {flushSync} from 'react-dom';
import {
useSandpack,
useActiveCode,
- SandpackCodeEditor,
SandpackThemeProvider,
} from '@codesandbox/sandpack-react';
+import { SandpackCodeEditor } from "@codesandbox/sandpack-react/dist/components/CodeEditor"
+
import scrollIntoView from 'scroll-into-view-if-needed';
import {IconChevron} from 'components/Icon/IconChevron';
@@ -18,6 +19,8 @@ import {NavigationBar} from './NavigationBar';
import {Preview} from './Preview';
import {CustomTheme} from './Themes';
+// const SandpackCodeEditor = React.lazy(() => import('@codesandbox/sandpack-react/dist/components/CodeEditor').then(module => module.SandpackCodeEditor) as any)
+
export function CustomPreset({
isSingleFile,
onReset,
@@ -60,15 +63,17 @@ export function CustomPreset({
// There has to be some better way to do this...
minHeight: 216,
}}>
-
+ {code}}>
+
+