Jupyter notebook component loads forever

Question

I am trying to integrate an executable notebook with @datalayer/jupyter-react in next.js application. I have followed the approach mentioned in their repo (https://github.com/datalayer/jupyter-ui/tree/main/examples/next-js). It shows me a forever loading screen for notebook component.

Notebook.tsx

'use client';

import { Jupyter, Notebook } from '@datalayer/jupyter-react';

export function NotebookComponent() {
  return (
    <>
      <div style={{ fontSize: 20 }}>Jupyter Notebook in Next.js</div>
      <Jupyter
        jupyterServerHttpUrl="https://oss.datalayer.tech/api/jupyter"
        jupyterServerWsUrl="wss://oss.datalayer.tech/api/jupyter"
        jupyterToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
      >
        <Notebook
          path="panel.ipynb"
        />
      </Jupyter>
    </>
  );
}

export default NotebookComponent;

Page.tsx

import dynamic from 'next/dynamic';

const NotebookComponentNoSSR = dynamic(
  () => import('../../components/jupyter/notebook'),
  {
    ssr: false,
  },
);

const CellComponentNoSSR = dynamic(
  () => import('../../components/jupyter/cell'),
  {
    ssr: false,
  },
);

interface NotebookViewProps {
  rightMenu: string;
  setRightMenu: (value: string) => void;
}

export default function NotebookView(
  props: NotebookViewProps,
): React.ReactElement {
  return (
    <div>
      <NotebookComponentNoSSR colorMode="light" />
      <CellComponentNoSSR colorMode="light" />
    </div>
  );
}

Next.config.tsx

module.exports = {
  reactStrictMode: true,
  webpack: (config, options) => {
    config.module.rules.push(
      {
        resourceQuery: /text/,
        type: 'asset/resource',
        generator: {
          filename: '[name][ext]',
        },
      },
      // Rule for pyodide kernel
      {
        test: /pypi\/.*/,
        type: 'asset/resource',
        generator: {
          filename: 'pypi/[name][ext][query]',
        },
      },
      {
        test: /pyodide-kernel-extension\/schema\/.*/,
        type: 'asset/resource',
        generator: {
          filename: 'schema/[name][ext][query]',
        },
      },
    );
    return config;
  },
};

Browser console:

Expected output :

I have tried from both local and datalayer's hosted jupyterlab server's url. Got same results for both.