[slug]/page.tsx re-renders static elements

i am creating a docs page in next.js using .mdx files.
in my docs pages it has two elemnts:

<div className={'flex flex-row'}>
            <DocsNav/>
            <div className={'flex flex-col'}>
                <EditPage docName={params.slug.toString()}/>
                <div className={'my-4'}>{content}</div>
            </div>

        </div>

now what’s happening is when i click on a new docs link, it shifts me from one docs page to another, but the problem is the : <DocsNav/> is getting re-created everytime i click on an item.

This is my project structure :

so suppose when i go from
/docs/home to docs/strings the navBar is getting recreate again and again as a results the NavBar gets shrinked again.

Its an open source project so you can check the GitHub repository directly :
Prismio Website

I tired few approach given by ChatGPT but non seems to work.

Please take a look on my please.
Thank you.