createBottomTabNavigator with dynamic tabStyle for different tabs

According to the Document, I can change activeTintColor and activeBackgroundColor in tabBarOptions.

Is there a way to style the tab button with something like activeTabBarStyle?

I want to add a borderTop to the active tab, like this:

figma

So I created a function for the defaultNavigationOptions to dynamically assign the tabStyle for different tabs:

// ...
const BottomNavigator = createBottomTabNavigator({
    Users: {
        screen: UsersStackNavigator,
    },
    Dashboard: {
        screen: DashboardStackNavigator,
    },
    Coupons: {
        screen: CouponsStackNavigator,
    }
}, {
    defaultNavigationOptions: ({ navigation }) => {
        // ...
        const active = navigation.isFocused();
        const width = active ? 2 : 0;  // This outputs 3 times, which are 2, 0, 0
        return {
            // ...
            tabBarOptions: {
                // ...
                tabStyle: {
                    paddingTop: 10,
                    borderTopColor: '#3A3AB5',
                    borderTopWidth: width
                }
            }
        };
    }
});

The width seems working but all the three tabs are only using the activated navigationOptions:

I don't know why the color can be different why not other styles as well?

enter image description here

Any ideas how to work around with it?