Component height is not getting animated on initial render, but works fine when tab is changed.

[seeker710]

So, currently I am trying to achieve a sliding bottom component in RN 0.76 using RNA 3.16. The component is working fine in RN 0.74 but not in latest native version.
In RN 0.76, the component's height is not changing on initial render but when I change tab, it is working as expected.

BottomTabNavigator.js file: This file contains BottomTabNavigator as well as SlidingBottom.js component

const BottomTab = createBottomTabNavigator();
const { height } = Dimensions.get('window');
const SNAP_TOP = height + StatusBar.currentHeight;
const SNAP_BOTTOM = 54 + 50;
    
const BottomTabNavigator = () => {
    const yValue = useSharedValue(SNAP_BOTTOM);
    return (
        <>
          {/* this component contain all screen and bottom tab navigator */}
            <BottomTab.Navigator
                tabBar={(props) => <BottomTabBar {...props} yValue={yValue} snapTop={SNAP_TOP} snapBottom={SNAP_BOTTOM} />}
                initialRouteName="Home"   // "Home" initial screen to render 
                backBehavior="history"
                screenOptions={{
                    headerShown: false,
                    tabBarHideOnKeyboard: true,
                }}
            >
                <BottomTab.Screen
                    name="Home"
                    component={Home}
                    options={{
                        tabBarLabel: "Home",
                        // we are importing focused as well as size from BottomTabBar.js file
                        tabBarIcon: ({ color }) => <HomeIcon height={icon_size} width={icon_size} fill={color} />,
                    }}
                />
                <BottomTab.Screen
                    name="Search"
                    component={Search}
                    options={{
                        tabBarLabel: "Search",
                        tabBarIcon: ({ color }) => <SearchIcon height={icon_size} width={icon_size} fill={color} />
                    }}
                />
            </BottomTab.Navigator>
            {/* this component contains the mini player & player page */}
            <SlidingBottom yValue={yValue} snapTop={SNAP_TOP} snapBottom={SNAP_BOTTOM} />
        </>
    );
}

export default BottomTabNavigator;

SlidingBottom.js: This contains the component that is facing issue

const { height } = Dimensions.get('window');
const SNAP_TOP = height + StatusBar.currentHeight;
const SNAP_BOTTOM = 54 + 50;
const config = {
    damping: 15,
    mass: 1,
    stiffness: 120,
    restSpeedThreshold: 0.1,
    restDisplacementThreshold: 0.1,
}

const SlidingBottom = ({ yValue }) => {
    // const yValue = useSharedValue(SNAP_BOTTOM);
    const prevYValue = useSharedValue(SNAP_BOTTOM);
    const pan = Gesture.Pan().minDistance(1).onBegin(() => {
        prevYValue.value = yValue.value;
    }).onUpdate((evevnt) => {
        yValue.value = clamp(
            prevYValue.value - evevnt.translationY,
            SNAP_BOTTOM,
            SNAP_TOP
        );
    }).onEnd((evevnt) => {
        yValue.value = withSpring(
            snapPoints(
                clamp(
                    prevYValue.value - evevnt.translationY,
                    SNAP_BOTTOM,
                    SNAP_TOP
                ),
                -evevnt.velocityY,
                [SNAP_BOTTOM, SNAP_TOP]),
            config
        );
    }).runOnJS(true);

    const yStyle = useAnimatedStyle(() => ({
        height: yValue.value
    }))

    const oStyle = useAnimatedStyle(() => ({
        opacity: interpolate(yValue.value, [SNAP_TOP, SNAP_BOTTOM], [0, 1], Extrapolation.CLAMP)
    }))

    return (
        <GestureDetector gesture={pan}>
            <Animated.View style={[yStyle, { position: "absolute", left: 0, right: 0, bottom: 0, backgroundColor: "red", borderColor: "purple", borderWidth: 1, zIndex: layout_schema.zIndexForSlidingBottom }]}>
                <Animated.View style={[oStyle, { height: 50, backgroundColor: "mediumseagreen" }]} />
                <Player />
            </Animated.View>
        </GestureDetector>
    );
}

export default SlidingBottom;

Also, I am using custom BottomTabBar:

import { useEffect, useState, useMemo } from "react";
import { Dimensions, Keyboard, Text, View, TouchableOpacity, StatusBar, StyleSheet } from "react-native";
import { useTheme } from "@react-navigation/native";
import Animated, { Extrapolation, interpolate, useSharedValue, useAnimatedStyle, withTiming, Easing } from "react-native-reanimated";
// import constants
import { color_schema, icon_size, layout_schema } from "../../constants/constants";

const { height } = Dimensions.get('window');

const BottomTabBar = ({ state, descriptors, navigation, yValue, snapTop, snapBottom }) => {    
    // using this hook we can get all colors used by react navigation 
    // as hooks can be only called inside function that's why we cannot declare all styles in StyleSheet
    const { colors } = useTheme();

    // this is used to check if keyboard is visible or not
    const [keyboardVisible, setKeyboardVisible] = useState(true);

    useEffect(() => {
        const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => {
            //Whenever keyboard did show make it don't visible
            setKeyboardVisible(false);
        });
        const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
            setKeyboardVisible(true);
        });
        return () => {
            keyboardDidShowListener.remove();
            keyboardDidHideListener.remove();
        };
    }, [])

    const bStyle = useAnimatedStyle(() => ({
        // height: interpolate(yValue.value, [snapTop, snapBottom], [0, 54], Extrapolation.CLAMP), then add bottom: 0 in styles.bottom
        bottom: interpolate(yValue.value, [snapTop, snapBottom], [-54, 0], Extrapolation.CLAMP)
    }));

    return (
        keyboardVisible &&
        <Animated.View style={[styles.bottom, bStyle, { backgroundColor: colors.card }]}>
            {
                state.routes.map((route, index) => {
                    const { options } = descriptors[route.key];
                    const label = options.tabBarLabel !== undefined
                        ? options.tabBarLabel
                        : options.title !== undefined
                            ? options.title
                            : route.name;
                    const isFocused = useMemo(() => state.index === index, [state.index]);

                    {/* function for onPress event */ }
                    const onPress = () => {
                        const event = navigation.emit({
                            type: "tabPress",
                            target: route.key,
                        });
                        if (!isFocused && !event.defaultPrevented) {
                            navigation.navigate(route.name);
                        }
                    };

                    {/* function for onLongPress event */ }
                    const onLongPress = () => {
                        const event = navigation.emit({
                            type: "tabLongPress",
                            target: route.key,
                        });
                        if (!isFocused && !event.defaultPrevented) {
                            navigation.navigate(route.name);
                        }
                    };

                    {/* setting color for icon and text */ }
                    const color = isFocused ? color_schema.focused_header_color : color_schema.unfocused_header_color
                    const widthSharedValue = useSharedValue(isFocused ? "100%" : "0%");

                    useEffect(() => {
                        widthSharedValue.value = withTiming(isFocused ? "100%" : "0%", {
                            duration: 300,
                            easing: Easing.bounce,
                        })
                    }, [state.index])

                    const animatedWidth = useAnimatedStyle(() => {
                        'worklet';
                        return {
                            width: widthSharedValue.value,
                        };
                    })

                    return (
                        <TouchableOpacity
                            key={route.key} // using route.key for unique keys but we can use index also
                            // accessibilityRole="button"
                            accessibilityState={isFocused ? { selected: true } : {}}
                            accessibilityLabel={options.tabBarAccessibilityLabel}
                            testID={options.tabBarTestID}
                            onPress={onPress}
                            onLongPress={onLongPress}
                        >
                            <View style={styles.navItem}>
                            {/* this view contains icon */}
                            <View>
                                    {options.tabBarIcon({ color, focused: isFocused, size: icon_size })}
                                </View>
                            {/* this view contains label */}
                            <View style={styles.labelContainer}>
                                    <Text style={[styles.label, { color }]}>{label}</Text>
                                </View>
                            {/* this view contains undedrline */}
                            <Animated.View style={[styles.underline, animatedWidth]} />
                            </View>
                        </TouchableOpacity>
                    );
                })
            }
        </Animated.View>
    );
}

const styles = StyleSheet.create({
    bottom: {
        borderTopColor: color_schema.border_bottom_color,
        borderTopWidth: 1,
        flexDirection: "row",
        justifyContent: "space-evenly",
        alignItems: "center",
        paddingTop: 5,
        paddingBottom: 2,
        position: "absolute",
        left: 0,
        right: 0,
        zIndex: layout_schema.zIndexForBottomTabNavigator,
        height: 54,
        overflow: "hidden",
    },
    navItem: {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
    },
    labelContainer: {
        marginTop: -1,
        marginBottom: 1,
        marginHorizontal: "auto",
        width: "auto",
    },
    label: {
        fontSize: 10,
        fontWeight: "400",
    },
    underline: {
        backgroundColor: color_schema.focused_header_color,
        borderRadius: 2,
        height: 2,
    },
});

export default BottomTabBar;

Kindly help me community!!!