Not able to load a next api with swr

[ismaelrumzan]

Hi,
I'm trying to set up an embed codesandbox for an API edge function code example.
It works in the sandbox here:
https://codesandbox.io/p/sandbox/hopeful-lake-4ncj08

When I try to use a similar example (JS version) in the code embed, I get failed to load in the preview. This is my code.
Any suggestions?

import {
  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor,
  SandpackFileExplorer,
  SandpackPreview,
} from "@codesandbox/sandpack-react";

const filename = '/pages/api/hello.js';

const files={};

files[filename] = {
code: `import { NextResponse } from 'next/server';
export const config = {
    runtime: 'edge',
};

export default (req) => {
    return NextResponse.json({
      name: 'Hello now an Edge Function!',
    });
  };
  `,
};

  files['/pages/index.js'] = {
    code: `import useSwr from 'swr';
    const fetcher = (url) => fetch(url).then((res) => res.json());
    export default function Index() {
    const { data, error, isLoading } = useSwr('/api/hello', fetcher)

  if (error) return <div>Failed to load</div>
  if (isLoading) return <div>Loading...</div>
  if (!data) return null

  return (
  <div>Got data</div>
  )
}
    `
  }

export default () => (
  <SandpackProvider template="nextjs" files={files} customSetup={{
          dependencies: {
            swr: 'latest',
          },
        }}>
    <SandpackLayout>
      <SandpackFileExplorer />
      <SandpackCodeEditor />
      <SandpackPreview />
    </SandpackLayout>
  </SandpackProvider>
);