React Native Reanimated Dynamic height issues

Question

I'm using React-native-reanimated lib trying to animate expansion of the custom card-like view. Each card has a default height of 115 (unexpanded). Once expanded, each card has number of elements in a FlatList which are displayed (Some card has 1, some card has 3, some 8 etc..). For this expansion, I wanted to add animation.

Now, animation itself works fine, however the final height to which the card has to expand is incorrect.

I calculate the final height like this : const expandedCardHeight = data.sets.length * 55; (data.sets are the elements of each card and 55 is the approximate height each element to be fully displayed). Please note each element has the same height, so this shall be correct calculation.

The issue is that sometimes, the expansion works well & the final height is correctly expanded. However, most of the times there is a huge gap left underneath the last element. It looks like the height was wrongly calculated resulting in too large final height. On the other hand, sometimes some elements are even cut off completely - the final height is too small.

When I log the height calculations, they seem correct & also logged number of elements is always correct. Therefore, I don't understand what is happening.

Code:

const unExpandedCardHeight = useSharedValue(115); 
const expandedCardHeight = data.sets.length * 55 + 15; // 15 for the padding underneath last element
const toggleExpanded = () => {
    setExpanded(!expanded);

    console.log("data.sets.length", data.sets.length);

    if (expanded) {
      unExpandedCardHeight.value = withSpring(
        unExpandedCardHeight.value - expandedCardHeight
      );
      console.log("unExpandedCardHeight.value:", unExpandedCardHeight.value);
    } else {
      unExpandedCardHeight.value = withSpring(
        unExpandedCardHeight.value + expandedCardHeight
      );
      console.log("unExpandedCardHeight.value:", unExpandedCardHeight.value);
    }
  };
return (
    <Animated.View style={{height: unExpandedCardHeight}}>
...
<FlatList data{data.sets} .../>
...
 </Animated.View>

Note, I don't think the issue is with react-native-reanimated as the same behaviour can be observed with default Animated lib from React Native