Animated View - react-native-reanimated fade background components wont go to background

I'm fairly new to react native. I believe it's a straightforward task but can't seem to get my head around it. I have a button that calls an Animated View (which fades in the whole overlay screen and works), but the button will not go in the background (fade out ). I've experimented with elevation and zIndex on the overlay prop but with no luck. Any tips or code snippets would be much appreciated.

// App.js
import React from "react";

import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
} from "react-native";

import Animated, {
    useSharedValue,
    withTiming,
    Easing,
    useAnimatedStyle,
} from "react-native-reanimated";

const App = () => {
    const fadeInOpacity = useSharedValue(0);

    const fadeIn = () => {

        console.log('clicked') 
        fadeInOpacity.value = withTiming(1, {
            duration: 1000,
            easing: Easing.linear,
        });

        
    };

    const animatedStyle = useAnimatedStyle(() => {
        return {
            opacity: fadeInOpacity.value, // Use the value directly
        };
    });

    return (
        <View style={styles.container}>
            <Animated.View
                style={[
                    styles.overlay,
                    animatedStyle,
                ]}
            >
            </Animated.View>
            <TouchableOpacity
                onPress={fadeIn}
                style={styles.button}
            >
                <Text style={styles.buttonText}>
                    Fade In
                </Text>
            </TouchableOpacity>
            
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#f0f0f0",
    },
    button: {
        marginTop: 20,
        backgroundColor: "blue",
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 5,
        shadowColor: "black",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.4,
        shadowRadius: 4,
        //elevation: 4,
    },
    buttonText: {
        color: "white",
        fontWeight: "bold",
        fontSize: 16,
    },

    overlay:{
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      backgroundColor: 'red',
      //elevation: 100,
      //zIndex:100
  }
});

export default App;

After playing around with expo_router I found the solution was to create a modal screen and in the layout file set the appropriate props (see below)

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{
          //Hide the header for this route
          headerShown: false,
      }} />
      <Stack.Screen
        name="modal"
        options={{
         // presentation: 'transparentModal',
          animation: 'fade',
          animationDuration: 2000,
          headerShown: false,
        }}
      />
    </Stack>
  );
}