Layout Animation isn't working as intended

[naishe]

I have a header component that has a View sandwiched between two Views to keep it at the center. I want to animate this sandwiched view to the left and introduce a "close" button to the right when formVisible===true. Essentially,

From this:

[---View1---][---View2---][---View3---]

To this:

[---View2---][------------------Close-]

So, I remove View1 and View3 when the form is visible, and add the Close button with Layout.duration(2000).delay(300).springify() but it does not work smoothly. Here is a simplified video of it:

reanimated2-bug-report.mp4

Here is the minimalistic code. What am I missing?

Thanks for reading this through. :)

import { StyleSheet, Text, View } from "react-native";
import React from "react";
import Animated, {
  FadeInUp,
  FadeOutDown,
  Layout,
} from "react-native-reanimated";

type Props = {
  formVisible: boolean;
};

const BottomSheetHeader = ({ formVisible }: Props) => {
  return (
    <Animated.View
      style={{ flexDirection: "row" }}
      layout={Layout.duration(2000).delay(300).springify()}
    >
      {
        // Filler block to keep title in the center when form is not visible
        !formVisible && (
          <Animated.View style={{ flexGrow: 1, backgroundColor: "yellow" }} />
        )
      }
      <Animated.View style={styles.title}>
        <Text>Edit Expense</Text>
      </Animated.View>
      {
        //Filler block to keep title in the center when form is not visible
        !formVisible && (
          <Animated.View style={{ flexGrow: 1, backgroundColor: "yellow" }} />
        )
      }

      {
        // This component enters when form is visible
        formVisible && (
          <Animated.View
            entering={FadeInUp}
            exiting={FadeOutDown}
            style={{ flexGrow: 1, alignItems: "flex-end" }}
          >
            <Text>X</Text>
          </Animated.View>
        )
      }
    </Animated.View>
  );
};

export default BottomSheetHeader;

const styles = StyleSheet.create({
  title: {
    marginBottom: 10,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    backgroundColor: "red",
  },
});