Component not loading in side a filerouter directory.

[MRgrav]

I am using a component inside './src/router/docs/index.jsx' and I have tries both html anchor tag and solid to switch to 'docs/'. but the component is not loading, only a blank screen with nav bar. when I reload the page, then only it shows the component. I have checked the inspect/sources.

./src/router/docs/index.jsx

export default function Docs() {
    return (
        <main class="h-full flex mx-auto max-w-[1200px] bg-gray-100">
          <div class="flex-1 max-w-44">
            <DocsMenu />
          </div>
          <div class="flex-1">
            content
          </div>
        </main>
    );
}

./src/components/DocsMenu.jsx

export default function DocsMenu() {
    return (
        <aside>
            <ul class="flex flex-row w-full">
                <li class="p-2 m-2">
                    <A href="/">home</A>
                </li>
                <li class="p-2 m-2">
                    <A href="/">home</A>
                </li>
            </ul>
        </aside>
    );
}