React-native animation only running on initial screen render on bottom tabbar

Question

After upgrading react-navigation to v6, my custom animations on tabbar items are only running once (when screen is initially rendered) and I cannot figure out why.

Tabbar component:

export default function AnimatedTabbar({state, descriptors, navigation}) {
  const theme = useTheme();
  const focusedOptions = descriptors[state.routes[state.index].key].options;

  if (focusedOptions.tabBarVisible === false) {
    return null;
  }

  return (
    <SafeAreaView
      style={[
        navigationStyles.tabBar,
        theme.tabBar,
        {backgroundColor: theme.colors.tabbarBackgroundColour},
      ]}>
      {state.routes.map((route, index) => {
        const active = state.index === index;

        return (
          <AnimatedTabItem
            key={index}
            theme={theme}
            route={route}
            index={index}
            state={state}
            descriptors={descriptors}
            navigation={navigation}
          />
        );
      })}
    </SafeAreaView>
  );
}

AnimatedTabItem:

const navHeight = 49;

class AnimatedTabItem extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      isAnimated: false,
      slideUp: new Animated.Value(0),
      slideDown: new Animated.Value(-navHeight),
    };
  }

  render() {
    // other nav code

    const isFocused = state.index === this.props.index;

    if (isFocused) {
      Animated.spring(this.state.slideUp, {
        toValue: -navHeight,
        velocity: 10,
        easing: Easing.bounce,
        useNativeDriver: true,
      }).start();
    } else {
      Animated.spring(this.state.slideDown, {
        toValue: 0,
        velocity: 10,
        easing: Easing.bounce,
        useNativeDriver: true,
      }).start();
    }

    return (
      <View style={navigationStyles.tabItemWrapper}>
        <TouchableOpacity
          accessibilityRole="button"
          accessibilityStates={isFocused ? ['selected'] : []}
          accessibilityLabel={options.tabBarAccessibilityLabel}
          testID={options.tabBarTestID}
          onPress={onPress}
          onLongPress={onLongPress}
          style={navigationStyles.button}>
          <Animated.View
            style={[
              navigationStyles.container,
              {
                transform: [
                  {
                    translateY: isFocused
                      ? this.state.slideUp
                      : this.state.slideDown,
                  },
                ],
              },
            ]}>
            <View style={navigationStyles.inactiveContainer}>
              <FeatherIcon
                name={this.iconName(this.props.route)}
                size={20}
                style={navigationStyles.icon}
                color={
                  isFocused ? theme.activeTintColor : theme.inactiveTintColor
                }
              />
            </View>
            <View style={navigationStyles.activeContainer}>
              <Text
                style={[
                  navigationStyles.label,
                  {
                    color: isFocused
                      ? theme.activeTintColor
                      : theme.inactiveTintColor,
                  },
                ]}>
                {label}
              </Text>
              <View
                style={[
                  navigationStyles.activeDot,
                  {
                    backgroundColor: isFocused
                      ? theme.activeTintColor
                      : theme.inactiveTintColor,
                  },
                ]}
              />
            </View>
          </Animated.View>
        </TouchableOpacity>
      </View>
    );
  }
}

Active item should slide up and in-active item should slide down but the animation is gone after initial render as seen on the gif above.