mdx code block inside a react component

[merry flicker]

I want to use Tabs component to display the code block rendered by the mdx file
my current solution

import React from 'react';
import { Tabs, Tab } from "@nextui-org/react";
import * as LucideIcons from 'lucide-react';

interface CodeTabProps {
  title: string;
  language: string;
  children: string;
}

interface CodeTabsProps {
  children: React.ReactElement<CodeTabProps> | React.ReactElement<CodeTabProps>[];
  color?: "primary" | "secondary" | "success" | "warning" | "danger";
  variant?: "solid" | "bordered" | "light" | "underlined";
}

const languageIcons: { [key: string]: keyof typeof LucideIcons } = {
  javascript: 'FileJson',
  typescript: 'FileType',
  python: 'FileCode2',
  java: 'Coffee',
  css: 'FileType2',
  html: 'FileType2',
  // Add more languages and corresponding icons as needed
};

export const CodeTab: React.FC<CodeTabProps> = ({ title, language, children }) => {
  const IconComponent = LucideIcons[languageIcons[language] || 'File'];

  return (
    <Tab
      key={title}
      title={
        <div className="flex items-center space-x-2">
           <IconComponent size={18} />
          <span>{title}</span>
        </div>
      }
    >
        {children}
    </Tab>
  );
};

export const CodeTabs: React.FC<CodeTabsProps> = ({ children, color = "primary", variant = "bordered" }) => {
  return (
    <div className="flex w-full flex-col">
      <Tabs aria-label="Code blocks" color={color} variant={variant}>
        {children}
      </Tabs>
    </div>
  );
};

astro file (Placeholder component u seen below)

---
import {CodeTabs , CodeTab} from "./CodeTabs"
---

<p>code block</p>
<CodeTabs client:load>
<CodeTab language="Javascript" title="title">
 <slot/>
</CodeTab>
</CodeTabs>

mdx file

import Placeholder from "../../components/blog/CodeBlock/index.astro"
<Placeholder>

console.log("Hello world!")

</Placeholder>

error

type.getCollectionNode is not a function

the children for the <Placeholder> in mdx is basically the syntax for defining code block (three backticks js then inside that the code , discord is just rendering it)

mdx code block inside a react component