Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

I'm using a common set of Tabs and TabItem instances over-and-over again throughout multiple mdx pages. Instead of constantly writing out the groupId, value, and label properties over-and-over again, I tried create custom React components like:

import React, { ReactNode } from 'react';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

export const InstallationGroup = ({ children }: { children: ReactNode }) => (
  <Tabs groupId="installation">
    {children}
  </Tabs>
);

export const Local = ({ children }: { children: ReactNode }) => (
  <TabItem value="local" label="Local Installation">
    {children}
  </TabItem>
);

export const PaaS = ({ children }: { children: ReactNode }) => (
  <TabItem value="paas" label="Platform as a Service">
    {children}
  </TabItem>
);

And then in my MDX pages:

import { InstallationGroup, Local, PaaS } from '../../src/components/installation-tabs';

<InstallationGroup>
	<Local>

Local install content.

	</Local>
	<PaaS>

PaaS install content.

	</PaaS>
</InstallationGroup>

This builds fine, but when I navigate to the page in my browser I get this error:

Docusaurus error: Bad <Tabs> child <Local>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.

I feel like what I'm doing should work fine, but if not, is there another way I can achieve this?

Reproducible demo

https://codesandbox.io/p/devbox/clever-carlos-ztj56n

Steps to reproduce

I tried getting this to work in codesandbox but its stuck trying to bring up the localhost. I recommend just copying the files I shared above to demo the issue.

Expected behavior

I expect to be able to extend these react components for reusability.

Actual behavior

Error as described.

Your environment

• Public source code: https://github.com/HarperFast/documentation
• Docusaurus version used: 3.9.2
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome, Node 22
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS

Self-service

• I'd be willing to fix this bug myself.