TabContent.tsx

type TabProps = {
  defaultActiveKey: string;
  className?: string;
  children: ReactNode;
};

type TabContentProps = {
  eventKey: string;
  children: ReactNode;
  title: string;
};

export function Tab({ defaultActiveKey, className, children }: TabProps) {
  return <div>I am Main Tab</div>;
}

export function TabContent({ eventKey, title, children }: TabContentProps) {
  return <div>I am children content</div>;
}

function App() {
  return (
    <Tab defaultActiveKey="foo">
      <TabContent eventKey="foo" title="foo">
        <div>I am foo content</div>
      </TabContent>
    </Tab>
  );
}