How to create wrapper child component for react navigator

Tab.Navigator component can only have Tab.Screen component as a direct child component.

In Typescript, is there any way to cast Tab.Screen Type to TabButton function??

const App = () => {return (<NavigationContainer><Tab.Navigator tabBarOptions={{        ...><Tab.Screen name={'name1'} component={component1} /><Tab.Screen name={'Add Photos'} component={FeedScreen}                    options={{                      tabBarButton: ...        /><TabButton title={'Setting'} component={SettingScreen} imageSrc={'./icons/accountDark.png'}/>}

Here is what I am trying to do

type TabButtonProps = {  title: string,  component: any,  imageSrc: string,}const TabButton = ({title, component, imageSrc}: TabButtonProps) => {  return (<Tab.Screen name={title} component={component} options={{      tabBarIcon: ({focused}) => (<View style={{alignItems: 'center', justifyContent: 'center', top: 10}}><Image source={imageSrc as ImageSourcePropType}                 resizeMode='contain'                 style={{width: 25, height: 25, tintColor: focused ? '#999999' : '#dddddd'}}          /></View>      )}}/>  )}

what i've got:

Error: A navigator can only contain 'Screen' components as its direct children (found 'TabButton'). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.