I am using React with TypeScript and webpack. Currently, when I write code with TypeScript errors, VS Code displays the following errors:

Expected 2 arguments, but got 1.ts(2554)
MobileDatePicker.tsx(14, 27): An argument for 'onAccept' was not provided.
const MyActionBar: ({ onCancel, className }: PickersActionBarProps, onAccept: Function) => JSX.Element
No quick fixes available

Despite these errors showing up in the editor, I can still proceed with coding and running my application. However, I want to change this behavior so that these TypeScript errors cause a fatal error in both the console and the browser. This should prevent me from continuing further until I resolve the issues.

Package.json

{
    "name": "XXXX",
    "private": true,
    "version": "0.0.0",
    "scripts": {
        "build": "webpack --mode production",
        "build:dev": "webpack --mode development",
        "build:qa": "webpack --mode qa",
        "build:start": "cd dist && npx serve",
        "start": "webpack serve --open --mode development",
        "start:qa": "webpack serve --open --mode none",
        "start:dev": "webpack serve --open --mode development",
        "start:live": "webpack serve --open --mode development --live-reload --hot",
        "prepare": "cd .. && husky install frontend/.husky"
    },
    "dependencies": ...
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "{src}/**/*.{js,ts,jsx,tsx}": [
            "eslint --fix",
            "prettier --write"
        ],
        "!**/*.{js,ts,jsx,tsx}": "prettier --write"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

Webpack.config

module.exports = (env, arg) => {
    const envPath = `./.env.${arg.mode === 'none' ? 'qa' : arg.mode}`;
    console.log({ envPath });
    return {
        mode: env.file,
        entry: './src/main.tsx',
        output: {
            publicPath: '/',
        },
        resolve: {
            extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
            modules: ['src', 'node_modules'],
        },
        devServer: {
            port: 3000,
            historyApiFallback: true,
            allowedHosts: 'all',
        },
        module: {
            rules: [
                {
                    test: /.m?js/,
                    type: 'javascript/auto',
                    resolve: {
                        fullySpecified: false,
                    },
                },
                {
                    test: /.(css|s[ac]ss)$/i,
                    use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
                },
                {
                    test: /.(ts|tsx|js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                    },
                },
                {
                    test: /.(png|jpe?g|gif|svg)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                        },
                    ],
                },
            ],
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: './public/index.html',
            }),
            new ProvidePlugin({
                React: 'react', // automatically import react where needed
            }),
            new Dotenv({
                path: envPath,
            }),
        ],
    };
};