Positioning item at the bottom of the screen in React Native - flexbox

Question

I want to place my svg at the bottom of the screen. I have tried flex properties and postion absolute (bottom:0) but svg doesn't go to the bottom of the screen, and when I give the absolute position of svg it disappears while zIndex also doesn't work. Here is my code.
here is snack.snack
import Otp from '../assets/otp2.svg';
import Waves from '../assets/waves.svg';
const windowHeight = Dimensions.get('window').height;
const SignUp = () => {
return (
<View style={styles.container}>
<View style={styles.section1}>
<View
style={{
// justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
}}>
<Icon size={40} color="white" name="west" />
<Text style={styles.otpText}>OTP Verification</Text>
</View>
<Otp style={{marginBottom: 40}} />
</View>
<View style={styles.section2}>
{/* <View style={styles.section3}></View> */}
<View style={styles.wave}>
<Waves />
</View>
</View>
</View>
);
};
export default SignUp;
const styles = StyleSheet.create({
container: {
flex: 1,
},
section1: {
flex: 1,
backgroundColor: '#f07279',
justifyContent: 'space-evenly',
alignItems: 'center',
},
section2: {
flex: 1,
backgroundColor: '#fff',
// alignContent: 'flex-end',
// alignItems: 'flex-end',
},
section3: {
flex: 1,
backgroundColor: 'grey',
width: '80%',
height: '80%',
borderRadius: 25,
// position: 'absolute',
// zIndex: 1,
// top: -40,
},
otpText: {
fontSize: 25,
color: '#ffffff',
width: 200,
fontFamily: 'sans-serif-light',
},
wave: {
flex: 1,
// position: 'absolute',
// bottom: 0,
width: '100%',
// zIndex: 5,
// marginTop: '67%',
},
});
and here is the reference what i want to do.