diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index 4b3f41527d9..ea75a50a99b 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -74,7 +74,7 @@ function SandpackRoot(props: SandpackProps) {
 
   files['/styles.css'] = {
     code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
-    hidden: !files['/styles.css']?.visible,
+    hidden: files['/styles.css']?.hidden,
   };
 
   return (
diff --git a/beta/src/components/MDX/Sandpack/createFileMap.ts b/beta/src/components/MDX/Sandpack/createFileMap.ts
index 89d53cfd2f3..ea6c17252de 100644
--- a/beta/src/components/MDX/Sandpack/createFileMap.ts
+++ b/beta/src/components/MDX/Sandpack/createFileMap.ts
@@ -4,9 +4,9 @@
 
 import type {SandpackFile} from '@codesandbox/sandpack-react';
 
-export const createFileMap = (codeSnippets: any) => {
-  return codeSnippets.reduce(
-    (result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
+export const createFileMap = (codeSnippets: React.ReactElement[]) => {
+  return codeSnippets.reduce<Record<string, SandpackFile>>(
+    (result, codeSnippet) => {
       if ((codeSnippet.type as any).mdxName !== 'pre') {
         return result;
       }
diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx
index 3591e058144..eb90099d1bd 100644
--- a/beta/src/components/MDX/Sandpack/index.tsx
+++ b/beta/src/components/MDX/Sandpack/index.tsx
@@ -46,20 +46,20 @@ const SandpackGlimmer = ({code}: {code: string}) => (
 );
 
 export default memo(function SandpackWrapper(props: any): any {
-  const codeSnippet = createFileMap(Children.toArray(props.children));
+  const codeSnippets = Children.toArray(props.children) as React.ReactElement[];
+  const files = createFileMap(codeSnippets);
 
   // To set the active file in the fallback we have to find the active file first.
   // If there are no active files we fallback to App.js as default.
-  let activeCodeSnippet = Object.keys(codeSnippet).filter(
+  let activeCodeSnippet = Object.keys(files).filter(
     (fileName) =>
-      codeSnippet[fileName]?.active === true &&
-      codeSnippet[fileName]?.hidden === false
+      files[fileName]?.active === true && files[fileName]?.hidden === false
   );
   let activeCode;
   if (!activeCodeSnippet.length) {
-    activeCode = codeSnippet['/App.js'].code;
+    activeCode = files['/App.js'].code;
   } else {
-    activeCode = codeSnippet[activeCodeSnippet[0]].code;
+    activeCode = files[activeCodeSnippet[0]].code;
   }
 
   return (