Uncaught (in promise) TypeError

[Bumer19981]

I installed the npm package and after calling any function from penumbra I got the error is Uncaught (in promise) TypeError: _transcend_io_penumbra__WEBPACK_IMPORTED_MODULE_2___default.a.saveZip is not a function, I tried to copy penumbra files from it's build folder to my project's build folder as the developers wrote in the manual, but still no luck. I am sorry for this "issue", because it should not be the issue, it is mostly my misunderstanding of the propper way I should use the package, but how can I make it work?
My webpack.conf.js

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const fs = require("fs");
const PENUMBRA_DIRECTORY = path.join(__dirname, "node_modules", "@transcend-io/penumbra", "build");
module.exports = {
    plugins: [
        new CopyPlugin({
            patterns: fs
                .readdirSync(PENUMBRA_DIRECTORY)
                .filter((fil) => fil.indexOf(".") > 0)
                .map((fil) => ({
                    from: `${PENUMBRA_DIRECTORY}/${fil}`,
                    to: `${"dist"}/${fil}`,
                })),
        }),
    ],
    entry: ["babel-polyfill", "./app/app.jsx"],
    mode: "development",
    output: {
        filename: "./main.js",
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 4000,
        watchContentBase: true,
        progress: true,
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader",
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ["file-loader"],
            },
            { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: "babel-loader" },
            {
                test: /\.txt$/,
                use: "raw-loader",
            },
        ],
    },
};

package.json

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "React app",
  "main": "./app/app.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "start": "webpack"
  },
  "author": "Me",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^3.4.2",
    "raw-loader": "^4.0.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@transcend-io/penumbra": "^5.0.4",
    "bootstrap": "^4.4.1",
    "copy-webpack-plugin": "^6.2.1",
    "fs": "0.0.1-security",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-dropzone": "^10.2.1",
    "socket.io-client": "^3.1.2"
  },
  "babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }
}

app.jsx

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ItemsList from "./components/ItemsList.jsx";
const propsValues = {
    title: "Menu",
    items: ["Samsung Galaxy Note20", "Apple iPhone 12 Pro", "Google Pixel 5", "Huawei P40 Pro", "OnePlus 8 Pro", "Asus Zenfone 7 Pro"],
};
ReactDOM.render(<ItemsList data={propsValues} />, document.querySelector("#root"));

ItemsList.jsx

import React, { Component } from "react";
import SearchPlugin from "./SearchPlugin.jsx";
import penumbra from "@transcend-io/penumbra";
class ItemsList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { items: this.props.data.items };

        this.filterList = this.filterList.bind(this);
    }
    async componentDidMount() {
        const cacheBuster = Math.random().toString(10).slice(2);
        const files = [
            {
                url: "https://s3-us-west-2.amazonaws.com/bencmbrook/tortoise.jpg.enc",
                name: "tortoise.jpg",
                mimetype: "image/jpeg",
                decryptionOptions: {
                    key: "vScyqmJKqGl73mJkuwm/zPBQk0wct9eQ5wPE8laGcWM=",
                    iv: "6lNU+2vxJw6SFgse",
                    authTag: "ELry8dZ3djg8BRB+7TyXZA==",
                },
            },
        ];
        const writer = penumbra.saveZip();
        await writer.write(...(await penumbra.get(...files)));
        await writer.close();
    }
    filterList(text) {
        var filteredList = this.props.data.items.filter(function (item) {
            return item.toLowerCase().search(text.toLowerCase()) !== -1;
        });
        this.setState({ items: filteredList });
    }

    render() {
        return (
            <div>
                <h2>{this.props.data.title}</h2>
                <SearchPlugin filter={this.filterList} />
                <ul>
                    {this.state.items.map(function (item) {
                        return <li key={item}>{item}</li>;
                    })}
                </ul>
            </div>
        );
    }
}

export default ItemsList;