NextJS MDX: rehype-toc does not work as expected

[Samuele1818]

I'm creating a blog using NextJs13 and MDX, I have added a table of contents to my pages using rehype-toc.

I want the table (so element) to be outside the article element, to do this I tried to use the position attribute in the plugin config, but it not worked as expected.

next.config.mjs

const withMDX = createMDX({
   extension: /\.mdx?$/,
   options: {
        ...
        [rehypeToc, {
            headings: ["h1"],
            // I suppose that TOC will be inserted after the article element
            // (so to be a child of the `<main>` element)
            position: "afterend"
            cssClasses: {
                toc: "toc not-prose",
                link: "toc-link"
            },
        }]
   }},
})

page.tsx

const Index: NextPage = ({ params }: any) => {
const { post } = params

const PostFile = dynamic(() => import(`../posts/${post}.mdx`).
   catch(() => notFound())
)

 return (
   <main>
     <article className='prose prose-slate lg:prose-xl'>
       <PostFile />
     </article>
   </main>
  )
}

If you need more information code is public on my GitHub (blog code is located in /app/blog).