Table of Contents not displaying on sidebar when using Stoplight with Docusaurus

[vyshakhbabji]

Hello, I've been experiencing an issue where the Table of Contents (TOC) from Stoplight does not display in the side panel when used within a Docusaurus site.

Here's the code snippet I'm working with:

import React, { useEffect } from 'react';
import Layout from '@theme/Layout';
import { StoplightProject } from '@stoplight/elements-dev-portal';
import '@stoplight/elements-dev-portal/styles.min.css';

function DocElement() {
  return (
      <StoplightProject
        projectId="XXX"
        router="hash"
      />
  );
}

export default function Home() {
  return (
    <Layout
      title="Developer Guide"
      description="Wiliot Developer Guide"
      noFooter
      wrapperClassName="developer-guide"
    >
      <DocElement />
    </Layout >
  );
}

I've tried to isolate the issue as much as possible, even rendering the StoplightProject in a separate div to avoid CSS conflicts. However, the TOC still does not appear. I have also checked for JavaScript errors and network activity, but did not find any issues there.

I'm currently using the following versions of the libraries:

Docusaurus version: 2.4.0
Stoplight elements-dev-portal version: ^1.10.1
Any help or guidance you could provide would be greatly appreciated!

[vyshakhbabji]

There was an issue on how i created routers. I fixed the routing and now i can see the sidebar populated.