Loading MDX Files From public Directory In NUXT (production)

I Am Currently Trying to load mdx files from my nuxt projects public/docs folder my approch currently is as follows

async function loadMDX(componentPath) {
  try {

    const { public: { docsBasePath } } = useRuntimeConfig();

    console.log("Receved from nuxt: ", docsBasePath)

    // 1) Fetch the raw text so vfile-matter can parse it
    const res = await fetch(`/docs/${componentPath}`);
    const text = await res.text();

    // 2) Parse frontmatter from that text
    const file = new VFile({ value: text });
    matter(file);
    docsStates.value.selectedDocMatter = file.data.matter

    // 3) Now import the compiled MDX module (for rendering)
    const module = await import(`${docsBasePath}/${componentPath}`);
    mdxContent.value = wrapWithProvider(module.default);
  } catch (error) {
    console.error(error);
    mdxContent.value = null;
  }
}

the docsBasePath is from a .env or .env.production based on the enviroment and is as follows

DOCS_BASE_PATH=../../public/docs
// for developement
DOCS_BASE_PATH=/docs
//for production

in development loading this mdx files works perfectly but in production when deploying to vercel i simply get this error

Error:
TypeError: Failed to fetch dynamically imported module: https://vdocs-brown.vercel.app/docs/@v1.0.0/Custom%20Components/Components.mdx

why is my nuxt app not finding it especially since its listed under my vercel static served files with this path