TabBar Animation Not Working On First Render

[falk-png]

Hey. I have created a custom tabbar with animation and it works fine, but the only problem is that on first render it just waits 250 ms and shows the indicator, but it should start from 0 and go to 100% in this time. When i click another Label it does the same thing, but when i click the initial tab again it animates fine, so like everytime the label renders the first time it doesnt animate correctly.

https://streamable.com/430snv

TabBarLabels.js:

export const TabBarLabels = ({ tabNames, tabContainer }) => {
    const styles = require("./styles.js").default({});

    return (
        <View style={styles.mainContainer}>
            {tabNames.map((name, index) => 
                <Label key={index} name={name} tabContainer={tabContainer} />)}
        </View>
    )
}

Label.js:

export const Label = ({ name, tabContainer }) => {
    const styles = require("./styles").default();

    const focusedTab = useFocusedTab();

    const animatedIndicator = useDerivedValue(() => ({ height: name === focusedTab ? 3 : 0, width: name === focusedTab ? "100%" : 0 }), [name, focusedTab]);
    const animatedIndicatorStyle = useAnimatedStyle(() => ({ 
        height: withTiming(animatedIndicator.value.height, { duration: 250 }),
        width: withTiming(animatedIndicator.value.width, { duration: 250 }),
        position: "absolute",
        bottom: 0,
        backgroundColor: DEFAULT_DARK_BLUE,
        borderRadius: 2.5
    }));

    return (
        <TouchableOpacity onPress={() => {
                tabContainer.current.jumpToTab(name);
            }} style={styles.trigger}>
            <Text>{name}</Text>
            <Animated.View style={animatedIndicatorStyle} />
        </TouchableOpacity>
    )
}