dropdown list is way below

[JAMAL0123]

Hi please see attached.
im using you example from here
the list is way below the dropdown!

[JAMAL0123]

import React, { useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import DropDown from "react-native-paper-dropdown-updated";
import { Provider as PaperProvider } from 'react-native-paper';

function Dashboard() {
const [showDropDown, setShowDropDown] = useState(false);
const [gender, setGender] = useState("");
const genderList = [
{
label: "Male",
value: "male",
},
{
label: "Female",
value: "female",
},
{
label: "Others",
value: "others",
},
];

return (

<PaperProvider>
      <SafeAreaView style={styles.safeContainerStyle}>
        <DropDown
          label={"Gender"}
          mode={"outlined"}
          visible={showDropDown}
          showDropDown={() => setShowDropDown(true)}
          onDismiss={() => setShowDropDown(false)}
          value={gender}
          setValue={setGender}
          list={genderList}
        />
      </SafeAreaView>
      </PaperProvider>

)
}

const styles = StyleSheet.create({
containerStyle: {
flex: 1,
},
spacerStyle: {
marginBottom: 15,
},
safeContainerStyle: {
flex: 1,
margin: 20,
justifyContent: "center",
},
});

export default Dashboard;