How to pull down to close the modal? React-Native - reactjs

Question

I have a Problem.
The Problem is that my modal don't closed, when I swipe down. How can I change it?
I tried so many things, but nothing worked.
To see the problem, click here (Video/GIF)
I am new in React and I don't know if the Information that I wrote are much or not. If you need more Information just write it down.
import {
KeyboardAvoidingView,
Platform,
StyleSheet,
Text,
View,
SafeAreaView,
ScrollView,
Image,
TouchableOpacity,
Modal,
} from "react-native";
import { createStackNavigator } from "#react-navigation/stack";
import StundenplanBoxScreen from "../Stundenplan/StundenplanBoxScreen.js";
const Stundenplan = ({ navigation }) => {
const [modalOpen, setModalOpen] = useState(false);
const setConst = () => setModalOpen((previousState) => !previousState);
return (
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.boxlogo}>
<Image source={yourLogo} style={styles.logo} />
</View>
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalOpen}
presentationStyle="pageSheet"
onSwipeComplete={() => setModalOpen(false)}
swipeDirection="down"
>
<View style={styles.HinzufuegenModal}>
<Text>Hello!</Text>
</View>
</Modal>
</View>
<StundenplanBoxScreen />
</ScrollView>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.bottom}
>
<TouchableOpacity onPress={setConst}>
<View style={styles.Hinzufuegen}>
<Text style={styles.HinzufuegenText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
</SafeAreaView>
);
};
export default Stundenplan;
const yourLogo = require("../adaptive-icon.png");
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#FEF5E2",
},
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
boxlogo: {
justifyContent: "center",
alignItems: "center",
marginTop: Platform.OS === "ios" ? -10 : 5,
},
logo: {
width: 100,
height: 100,
resizeMode: "contain",
},
box: {
backgroundColor: "#FFF",
paddingBottom: 15,
marginTop: -5,
margin: Platform.OS === "ios" ? 20 : 25,
borderRadius: 6,
//Shadow
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.48,
shadowRadius: 11.95,
elevation: 18,
},
HinzufuegenModal: {
margin: 20,
borderRadius: 20,
padding: 35,
alignItems: "center",
backgroundColor: "#FFF",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.48,
shadowRadius: 11.95,
elevation: 18,
},
inhalt: {
padding: Platform.OS === "ios" ? 20 : 17,
},
uberschrift: {
fontWeight: "500",
fontSize: 19,
},
beschreibungTitle: {
fontSize: 48,
fontWeight: "bold",
marginTop: Platform.OS === "ios" ? -10 : 5,
},
bottom: {
position: "absolute",
bottom: 0,
width: "100%",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
Hinzufuegen: {
width: 60,
height: 60,
backgroundColor: "#FFF",
borderRadius: 10,
bottom: Platform.OS === "ios" ? 125 : 110,
right: Platform.OS === "ios" ? -310 : -325,
justifyContent: "center",
alignItems: "center",
//Shadow
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.48,
shadowRadius: 11.95,
elevation: 18,
},
HinzufuegenButton: {
width: 60,
height: 60,
backgroundColor: "#FFF",
borderRadius: 10,
bottom: Platform.OS === "ios" ? 125 : 110,
right: Platform.OS === "ios" ? -310 : -325,
justifyContent: "center",
alignItems: "center",
//Shadow
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.48,
shadowRadius: 11.95,
elevation: 18,
},
HinzufuegenText: {
fontSize: 35,
color: "#02131C",
},
});