Criei um projeto com React-Native e TypeScritpt, importei os componentes do React-Navigation e ao usar a propriedade screenOptions dentro do Navigation ele apresenta o seguinte erro.

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Props, "children" | "backBehavior" | "lazy" | "tabBar" | "tabBarOptions"> & { initialRouteName?: string; screenOptions?: BottomTabNavigationOptions | ((props: { ...; }) => BottomTabNavigationOptions); }, context?: any): ReactElement<...> | Component<...>', gave the following error.

Acredito que o erro tenha algo a ver com o próprio TypeScript, pois se o arquivo esta com a extensão .JS o erro some, mas com a extensão .JSX o erro aparece.

Segue o código da pagina.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    import 'react-native-gesture-handler';
    import React from 'react';
    import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
    import AntDesign from 'react-native-vector-icons/AntDesign';
    import IconI from 'react-native-vector-icons/Ionicons';
    import Home from '../pages/Home';
    import Wallet from '../pages/Wallet';
    import Pay from '../pages/Pay';

    const Routes:React.FC = () => {
        const Tab = createBottomTabNavigator();

        const icons = {
            Home: {
                lib: AntDesign,
                name: 'home'
            },
            Wallet: {
                lib: AntDesign,
                name: 'creditcard'
            },
            Pay: {
                lib: AntDesign,
                name: 'home'
            },
            Notifications: {
                lib: IconI,
                name:'ios-notificaions-outline'
            },
            Config: {
                lib: AntDesign,
                name: 'setting'
            }
        }
        return (
            <Tab.Navigator
                screenOptions={({route}) => ({
                    tabBarIcon: ({color, size}) => {
                        const {} = icons[route.name];
                    }
                })}
            >
                <Tab.Screen options={{title:'Inicio'}} name="Home" component={Home} />
                <Tab.Screen options={{title:'Carteira'}} name="Wallet" component={Wallet} />
                <Tab.Screen options={{title:'Pagar'}} name="Pay" component={Pay} />
                <Tab.Screen options={{title:'Notificações'}} name="Notifications" component={Pay} />
                <Tab.Screen options={{title:'Ajustes'}} name="Config" component={Pay} />
            </Tab.Navigator>
        )
    }

    export default Routes;

<!-- end snippet -->