UI blocked after displaying a drop down alert - react-native

Question

I'm trying to display the error message via a drop down alert which I have hooked onto redux. I have it in the the main App.js file and the component is listening to error state change and will drop via an animation to show an error message. The Issue is once it has displayed the error message and went back up, I'm not able to click on the back button.
I tried to move the component after and before the SwitchNavigator.
// Drop down component
const DropDownAlert = props => {
const containerHeight = 120;
const ytranslate = new Animated.Value(-containerHeight);
useEffect(() => {
Animated.sequence([
Animated.spring(ytranslate, {
toValue: 0, //Animate to YPosition: 20
useNativeDriver: true,
easing: Easing.linear,
friction: 100,
tension: 0
}),
Animated.spring(ytranslate, {
delay: 3000, //waits 3s
toValue: -(containerHeight + 25), //Animate to YPosition: 20
useNativeDriver: true,
easing: Easing.linear,
friction: 100,
tension: 0
})
]).start(() => {props.removeAlertMessage});
});
if(!props.alertMessage.isMessage){
return null
}
return (
<View style={styles.container}>
<Animated.View
style={{
...props.style,
transform: [{ translateY: ytranslate }],
opacity: 0.8,
borderWidth: StyleSheet.hairlineWidth,
borderColor: theme.SECONDARY_COLOR
}}
>
<View style={styles.content}>
<View style={styles.iconContainer}>
<MaterialCommunityIcons
name="alert-circle-outline"
size={32}
color={theme.TERTIARY_COLOR}
/>
</View>
<Text style={styles.text}>{props.alertMessage.message}</Text>
</View>
</Animated.View>
</View>
);
};
// app.js return statement
return (
<Provider store={store}>
<AlertMessage/>
<SwitchNavigator uriPrefix={prefix} />
</Provider>
);
So I would like to be able to show the error message in the drop down alert and once it went back up I should be able to click on the back button.