React Navigation 4.x tabBarOptions not working Typescript

Please do not recommend me to use React Navigation 5.x, i use 4.x because of the switchNavigator, anyways. i'm having issues with the React Navigation 4.x after i migrated my project to typescript, this is part of the code that is getting an error.

 const MainTabs = createBottomTabNavigator({  Home: {    screen: HomeStack,    navigationOptions: {      tabBarIcon: ({focused}) => {        const image = focused ? Images.inicio_onFocus : Images.inicio_onBlur;        return <Image source={image} />;      },      tabBarOptions: {        activeTintColor: colors.active,        inactiveTintColor: colors.background,        style: {          marginTop: 10,          height: 65,          backgroundColor: colors.title,          shadowColor: colors.inactive,          borderTopColor: 'transparent',          borderTopWidth: 0,          elevation: 5,          shadowOpacity: 5,          shadowRadius: 10,        },      },      tabBarLabel: 'INICIO',    },  },  Vacations: {    screen: VacationsStack,    navigationOptions: {      tabBarIcon: ({focused}) => {        const image = focused ? Images.vacaciones_onFocus : Images.vacaciones_onBlur;        return <Image source={image} />;      },      /*      tabBarOptions: {        activeTintColor: colors.active,        inactiveTintColor: colors.background,        style: {          marginTop: 10,          height: 65,          backgroundColor: colors.title,          shadowColor: colors.inactive,          borderTopColor: 'transparent',          borderTopWidth: 0,          elevation: 5,          shadowOpacity: 5,          shadowRadius: 10,        },      },      */      tabBarLabel: 'VACACIONES',    },  },  HoursReport: {    screen: HoursReportStack,    navigationOptions: {      tabBarIcon: ({focused}) => {        const image = focused ? Images.imputar_onFocus: Images.imputar_onBlur;        return <Image source={image} />;      },      /*      tabBarOptions: {        activeTintColor: colors.active,        inactiveTintColor: colors.background,        style: {          marginTop: 10,          height: 65,          backgroundColor: colors.title,          shadowColor: colors.inactive,          borderTopColor: 'transparent',          borderTopWidth: 0,          elevation: 5,          shadowOpacity: 5,          shadowRadius: 10,        },      },      */      tabBarLabel: 'IMPUTAR',    },  },  ExpenseReport: {    screen: ExpenseReportStack,    navigationOptions: {      tabBarIcon: ({focused}) => {        const image = focused ? Images.rendir_onFocus : Images.rendir_onBlur;        return <Image source={image} />;      },      /*      tabBarOptions: {        activeTintColor: colors.active,        inactiveTintColor: colors.background,        style: {          marginTop: 10,          height: 65,          backgroundColor: colors.title,          shadowColor: colors.inactive,          borderTopColor: 'transparent',          borderTopWidth: 0,          elevation: 5,          shadowOpacity: 5,          shadowRadius: 10,        },      },      */      tabBarLabel: 'RENDIR',    },  },});

every part of the code that includes tabBarOptions is getting this error.

The expected type comes from property 'navigationOptions' which is declared here on type 'NavigationRouteConfig<NavigationBottomTabOptions, NavigationTabProp<NavigationRoute<NavigationParams>, any>, unknown>'