diff --git a/packages/react-sandpack/src/components/FileExplorer/ModuleList/ModuleList.tsx b/packages/react-sandpack/src/components/FileExplorer/ModuleList/ModuleList.tsx
index 5b55903ab6e..de6e04496a1 100644
--- a/packages/react-sandpack/src/components/FileExplorer/ModuleList/ModuleList.tsx
+++ b/packages/react-sandpack/src/components/FileExplorer/ModuleList/ModuleList.tsx
@@ -21,27 +21,18 @@ export default class ModuleList extends React.PureComponent<Props> {
       prefixedPath,
       files,
     } = this.props;
-
-    const filesToShow: { path: string }[] = [];
-    const directoriesToShow: Set<string> = new Set();
-    const pathParts = prefixedPath.split('/');
-
-    Object.keys(files).forEach(path => {
-      if (path.startsWith(prefixedPath)) {
-        const filePathParts = path.split('/');
-
-        if (filePathParts.length === pathParts.length) {
-          if (path.endsWith('/')) {
-            directoriesToShow.add(path);
-          } else {
-            filesToShow.push({ path });
-          }
-        } else if (filePathParts.length === pathParts.length + 1) {
-          filePathParts.pop();
-          directoriesToShow.add(filePathParts.join('/') + '/');
-        }
-      }
-    });
+    
+    const fileListWithoutPrefix = Object.keys(files)
+      .filter(file => file.startsWith(prefixedPath))
+      .map(file => file.substring(prefixedPath.length));
+
+    const directoriesToShow = new Set(fileListWithoutPrefix
+      .filter(file => file.includes('/'))
+      .map(file => `${prefixedPath}${file.split('/')[0]}/`));
+
+    const filesToShow = fileListWithoutPrefix
+      .filter(file => !file.includes('/'))
+      .map(file => ({ path: `${prefixedPath}${file}` }));
 
     return (
       <div style={{ marginLeft: `${0.5 * depth}rem` }}>