My mdx pages do not see my component and table settings in nextjs 14

Question

I want to include mdx documentation in my nextjs 14 project.

my project root

app -[locale] -(docs) -docs

---[slug]
----page.tsx

---layout.tsx
---page.tsx

inside my layout component

<div className='min-w-[18rem]'>
   <SidebarMenu/>
</div>
<div className='w-full'>
 <Content content={children} />
</div>

There are titles in my mdx file in my sidebar menu.

export default async function SidebarMenu({}: Props) {
  const posts = await getAllPostsMeta()
 <div className="flex justify-center w-full mb-8 py-5 bg-slate-200">
            {' '}
            <Image className="" src={'/img/logo2x.png'} width={100} height={100} alt="logo" />{' '}
         </div>
         <div className="">
            {posts.map((post, i) => (
               <div key={post.slug} className="text-white hover:bg-sky-700 py-1 px-5">
                  <Link href="/docs/[slug]" as={`/docs/${post.slug}`}>
                     {post?.title}
                  </Link>
               </div>
            ))}
         </div>

next.config.mjs

export default withNextIntl(
  nextMdx({
    extension: /\.mdx?$/,
    options: {
        remarkPlugins:[remarkGfm,remarkFrontmatter],
        rehypePlugins:[],
        providerImportSource:'@mdx-js/react'
      },
  })({
    pageExtensions: ['md', 'mdx', 'tsx', 'ts', 'jsx', 'js'],
    experimental: {
      mdxRs: false,
    },
    // Diğer Next.js konfigürasyonları ...
  })
);

Here, the part I wrote as table in mdx does not see the style, it is shown directly on the page as a line. Secondly, I add "MdxProvider componets={mycomponetns}", it does not affect the page section in the slug.

mdx > index.tsx

import fs from 'fs'
import path from 'path'
import { compileMDX } from 'next-mdx-remote/rsc' //https://nextjs.org/docs/app/building-your-application/configuring/mdx#remote-mdx

const rootDirectory = path.join(process.cwd(), 'app', 'content')
interface Frontmatter {
  title: string;
  // Diğer frontmatter özelliklerini ekleyebilirsiniz.
}

export const getPostBySlug = async (slug:string) => {
  const realSlug = slug.replace(/\.mdx$/, '')
  const filePath = path.join(rootDirectory, `${realSlug}.mdx`)

  const fileContent = fs.readFileSync(filePath, { encoding: 'utf8' })

  const { frontmatter, content } = await compileMDX({
    source: fileContent,
    options: { parseFrontmatter: true }
  })
  const unknownFrontmatter: unknown = frontmatter;

  // Unknown'dan Frontmatter'a güvenli bir dönüşüm yap
  const frontmatterTyped = unknownFrontmatter as Frontmatter;
   const { title } = frontmatterTyped;
  return { meta: { ...frontmatter, slug: realSlug,title}, content }
}

export const getAllPostsMeta = async () => {
  const files = fs.readdirSync(rootDirectory)

  let posts = []

  for (const file of files) {
    const { meta } = await getPostBySlug(file)
    posts.push(meta)
  }

  return posts
}