bug: react, IonTabBar does not allow for wrapped IonTabButton components

# Bug Report: Importing outer IonTabButton into IonTabBar does not render in React.

**Ionic version:**
[x] **5.x** (React)

**Current behavior:**
I am following the docs on creating the tabbar with tab buttons which works perfectly:

```ts
const Tabs = () => {
return (








Settings



Login / Register




)
}

```
Renders like it is supposed to:


I particularly like breaking down components a bit more, so let's start with just one file:

```ts
// SettingsTab.tsx
import { IonIcon, IonLabel, IonTabButton } from "@ionic/react"
import { cog } from "ionicons/icons"

export const SettingsTab = () => (


Settings

)
```

And import it and use it on my Tabs.tsx:

```ts
const Tabs = () => {
return (









Login / Register




)
}
```

**Expected behaviour:**

Now I would expect the behaviour to be the same as the previous one when I declared all buttons directly inside the Tabs, but this is what I am getting instead:

**Steps to reproduce:**
- Install the latest Ionic React
- Start a Tabs application
- Create a new component that exports a single tab button, for example:
```ts
export const SettingsTab = () => (


Settings

)
```
- import that component into the tabs and place it within ``

Thanks

Start by reproducing the issue in an Ionic React tabs application using the SettingsTab component shown in the report. Inspect how IonTabBar handles child components, then verify that a wrapped IonTabButton renders and behaves like an inline IonTabButton.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.