Custom Sliding bottom tab bar animation issue

Question

I have made a custom sliding bottom tab bar animation for my application. But the issue is that when I click on the bottom icon to navigate it does not work and I have to click twice for the animation to work.
Here is the gif for the same.
And I have my program for the same like below.

const CustomBottomNavigation = props => {
  // Screen Width
  const {width} = Dimensions.get('screen');

  // Position to animate the background color applied
  const position = new Animated.ValueXY();

  const animStyles = {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    width: width / 4,
    height: 3,
    backgroundColor: colors.grey,
    transform: position.getTranslateTransform(),
  };

  const animate = (value, route) => {
    props.navigation.navigate(route);
    Animated.timing(position, {
      toValue: {x: value, y: 0},
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View>
      <Animated.View style={animStyles} />
      <BottomTabBar
        {...props}
        onTabPress={({route}) => {
          switch (route.key) {
            case 'BuyerScreen':
              animate(0, route.key);
              break;
            case 'ClosingCostsScreen':
              animate(width / 4, route.key);
              break;
            case 'PrepaidsScreen':
              animate(width / 2, route.key);
              break;
            case 'PaymentsScreen':
              animate(width - width / 4, route.key);
              break;
          }
        }}
        style={{backgroundColor: 'transparent'}}
      />
    </View>
  );
};