Webpack/React - URL scheme "webpack" is not supported

I have recently started using Webpack to set up my react apps and I am running into a problem I'm unable to resolve.

I am creating a Terminal simulation. I have a controlled component thanks to which I can catch the user input and, according to it, render on-screen the relevant component.

Every time I test it by typing a command on the input, the following error shows up:

I have been trying to solve this by myself, but I am new to web development and probably lack the understanding on what's going on. Any help on the matter is deeply appreciated!

Here's the relevant snippet of code.

HandleInput.js

import { useState } from "react";

export default function HandleInput() {
const [values, setValues] = useState({
    userInput: "",
});

const [disabled, setDisabled] = useState(false);

const [blinking, setBlinking] = useState(false);

const [showComponent, setShowComponent] = useState(false);

const [showError, setShowError] = useState(false);

const [newInput, setNewInput] = useState(false);

const [errorHandling] = useState({
    message: "Command not found",
});

const [clear, setClear] = useState(false);

const handleChangeInput = (e) => {
    setBlinking(true);
    setValues({
        userInput: e.target.value.toLowerCase(),
    });
};

const manageInput = () => {
    switch (values.userInput) {
        case "help":
            setShowComponent(true);
            setShowError(false);
            break;
        case "ls":
            setShowComponent(true);
            setShowError(false);
        case "mkdir":
            setShowComponent(true);
            setShowError(false);
        case "clear":
            setShowComponent(true);
            setShowError(false);
        default:
            setShowComponent(false);
            setShowError(true);
    }
};

const handleClickInput = (e) => {
    e.preventDefault();
    setDisabled(true);
    setNewInput(true);
    manageInput();
};

return {
    values,
    setValues,
    disabled,
    setDisabled,
    blinking,
    setBlinking,
    errorHandling,
    handleChangeInput,
    handleClickInput,
    showComponent,
    setShowComponent,
    newInput,
    showError,
    setShowError,
    clear,
    setClear,
};
}

UserInput.js

import React from "react";
import HandleInput from "./HandleInput";
import Folder from "../Folder"
import { BsArrowRightShort } from "react-icons/bs";

export default function UserInput() {
const {
    values,
    blinking,
    disabled,
    handleChangeInput,
    handleClickInput,
    showComponent,
} = HandleInput();
return (
    <>
        <div className="form-container">
            <BsArrowRightShort className="arrow" />

            <p className="tilde"> ~ </p>
            <form onSubmit={(e) => handleClickInput(e)}>
                <input
                    autoFocus
                    className={!blinking ? "blinking" : "stop-blinking"}
                    value={values.userInput}
                    onChange={handleChangeInput}
                    disabled={!blinking ? disabled : disabled}
                />
            </form>
            {showComponent &&
            values.userInput === "ls" ?
                <Folder /> : null}
        </div>
    </>
);
}

And finally my webpack.config.js

const path = require("path");

module.exports = {
mode: process.env.NODE_ENV,
output: {
    path: path.join(__dirname, "/dist"),
    filename: "index.bundle.js",
    publicPath: "/",
},
devServer: {
    port: 5000,
    contentBase: "./dist",
    historyApiFallback: true,
},
resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
},
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
            },
        },
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
        },
    ],
},
};