react-native - createDrawerNavigator を使用して引き出しアイテムを表示しますか?

Question

を使用して引き出しをcreateDrawerNavigator作成していますが、customDrawerComponent渡すときに<DrawerItems {...props} />エラーが発生しています:

Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.Your likely from forget to export your component from the file it's defined in, or might have mixed up default and named imports.

私のコードで何が間違っているのかわかりません。それを修正するのを手伝ってください。

ここに私のコードがあります:App.js

const AppStackNavigator = createStackNavigator({
Home_Page: { screen: HomePage }

})

//customdrawerComponent start here

const customDrawerComponent = (props) => {
return (
    <Fragment>
        <SafeAreaView style={{ flex: 0, backgroundColor: "#9dc7c1" }} />
        <SafeAreaView style={{ flex: 1, backgroundColor: "#ffffff" }}>

            <View>
                <Text
                    style={{
                        marginTop: 10,
                        marginHorizontal: 20,
                        fontSize: 16,
                        fontWeight: "500",
                        color: "#ffffff"
                    }}
                >
                    Parent name
                </Text>
            </View>
            <ScrollView>
                <DrawerItems {...props} />
            </ScrollView>
        </SafeAreaView>
    </Fragment>
)
}

//End here

const DrawerNav = createDrawerNavigator(
    {
        Home_Page: { screen: AppStackNavigator },
        Signout: { screen: SignOut }
    },
    {
        drawerPosition: "left",
        contentComponent: customDrawerComponent,
    }
);

const MainNavigator = createSwitchNavigator({
    Decision: { screen: Decision },
    Login_Screen: { screen: Login },
    Otp: { screen: OtpScreen },
    Home: { screen: DrawerNav }
});

const Container = createAppContainer(MainNavigator);

HomePage.js

export default HomePage class extends Component{
static navigationOptions = ({ navigation }) => {

  return{
    title: 'Home',
    headerLeft: null,
    headerStyle: {
      backgroundColor: "#ff6a00"
    },
    headerLeft:(
      <View style={{paddingLeft:10}}>
       <Icon name='toggle-right' size={25}
       color="#ffffff"
       onPress={()=> navigation.openDrawer()}
       />
      </View>
    ),
    headerTitleStyle: {
      flex: 1,
      color: "#fff",
      alignItems: "center",
      justifyContent: "center",
      fontWeight: "600"
    }

  }

  };
   render(){
   return(
  <View>
  </View>
   )
    }
  }