expo DocumentPicker is not selecting any document

Question

I am new to React native i have a problem withe the expo DocumentPicker for some reason the DocumentPicker does not select any file, and it always shows that Selected Document: None

import React, { useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import * as DocumentPicker from "expo-document-picker";

export default function App() {
  const [document, setDocument] = useState(null);

  const pickDocument = async () => {
    const result = await DocumentPicker.getDocumentAsync({ type: 'application/pdf' });
    if (result.type === "success") {
      setDocument(result);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Selected Document: {document ? document.name : "None"}
      </Text>
      <Button title="Pick a file" onPress={pickDocument} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
  },
  paragraph: {
    marginTop: 24,
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
  },
});