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

首先，在使用报告中所示 SettingsTab 组件的 Ionic React 标签页应用中重现该问题。检查 IonTabBar 如何处理子组件，然后验证经过包装的 IonTabButton 是否能够像内联 IonTabButton 一样进行渲染并表现相同。

由索引模型根据 Issue 内容生成。