Cannot Read Property Show of Undefined When Using DocumentPicker.show() in React Native

I followed some answers from here that are similar to my issues. But unfortunately, the error is not removed. That is why I asked here again.

This is an old versioned React Native project where react-native-document-picker version was 2.1.0. When I upgraded the version to 8.0.0, the error shows as the following screenshot:

The current files are as like below;

android/settings.gradle

...    
include ':react-native-document-picker'
project(':react-native-document-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-picker/android')
...

android/app/build.gradle

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    ...
    ...
    implementation project(':react-native-document-picker')
}

package.json

{
  "name": "awesomeproject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "^6.0.2",
    "@react-navigation/drawer": "^6.3.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.1.1",
    "axios": "^0.26.1",
    "moment": "^2.29.1",
    "native-base": "^3.3.7",
    "react": "17.0.2",
    "react-native": "0.67.2",
    "react-native-action-button": "^2.8.5",
    "react-native-document-picker": "^8.0.0",
    "react-native-dropdownalert": "^4.5.1",
    "react-native-fcm": "^16.2.4",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-fs": "^2.19.0",
    "react-native-gesture-handler": "^2.3.2",
    "react-native-image-picker": "^4.7.3",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-keyboard-spacer": "^0.4.1",
    "react-native-loading-spinner-overlay": "^3.0.0",
    "react-native-modal-datetime-picker": "^13.1.0",
    "react-native-modalbox": "^2.0.2",
    "react-native-reanimated": "^2.4.1",
    "react-native-safe-area-context": "^4.1.2",
    "react-native-screens": "^3.13.0",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-simple-toast": "^1.1.3",
    "react-native-svg": "^12.3.0",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^9.1.0",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

app.js

import {DocumentPicker, DocumentPickerUtil} from 'react-native-document-picker';

    pressOnAttach() {
        Keyboard.dismiss();
        this.refs.NoticeTitle.blur();
        this.refs.NoticeDescription.blur();
        setTimeout(() => {
                DocumentPicker.show({
                filetype: [DocumentPickerUtil.allFiles()],
            }, (error, res) => {
                if (error === null) {
                    setTimeout(() => {
                        if (!this.checkFileExtension(res.fileName)) {
                            alert(AppText.VALID_EXTENSION_MESSAGE)
                        } else {
                            this.generateList(res.uri, res.fileName, res.fileSize);
                        }
                    }, 1000)
                }
            });
        }, 1000)
    }

When I console.log the DocumentPicker and DocumentPickerUtil, it returns undefined always.

Could anyone help me please to fix this issue? Thanks in advance!