Unable to start my react application and getting error in webpack server

Question

I don't know where am going wrong

Am not sharing all package.json but whatever required am sharing.

here is my package.json

     "scripts": {
     "develop": "webpack serve --hot --port 8080 --disable-host-check --config webpack.develop.js",       
    },
     "engines": {
        "node": ">=10"
    },
    "devDependencies": {
 "react-hot-loader": "^4.12.20",
        "react-test-renderer": "^17.0.1",
        "typescript": "4.1.2",
        "webpack": "^5.70.0",
        "webpack-bundle-analyzer": "^4.2.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.7.4"
    }

web.develop.js

const commonConfig = require('./webpack.config')

module.exports = {
    ...commonConfig,
    output: {
        ...commonConfig.output,
        publicPath: 'http://localhost:8080/',
    },
    mode: 'development',
    module: {
        rules: [
            ...commonConfig.module.rules,
            {
                test: /\.(js|jsx|ts|tsx)?$/,
                use: 'react-hot-loader/webpack',
                include: /node_modules/,
            },
        ],
    },
    devServer: {
        index: 'index.html',
        hot: "only", // hot:true
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
            'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
        },
    },
    plugins: [...commonConfig.plugins],
}

error:

[webpack-cli] Error: Unknown option '--disable-host-check'
[webpack-cli] Run 'webpack --help' to see available commands and options

if i use this command

"develop": "webpack serve --hot --port 8080 --allowed-hosts all --config webpack.develop.js"

am getting below error

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'index'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?,
onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

i removed index and localhost up and running but build.js is not created in dist folder.

webpack.config.js

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const dotenv = require('dotenv')

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
    .BundleAnalyzerPlugin

// Create .env file if it does not exist
if (!fs.existsSync('.env')) {
    fs.copyFileSync('.env_example', '.env')
}
dotenv.config()
if (!process.env.POSTS_SERVER_URL) {
    // webpack 5 is stricter about environment variables. The POSTS_SERVER_URL
    // environment variable was not mentioned in the README so default it for
    // those developers who may have created a .env file without the variable.
    process.env.POSTS_SERVER_URL = 'http://127.0.0.1:3000'
}

const PATHS = {
    app: path.join(__dirname, 'src/index.tsx'),
}

module.exports = {
    entry: {
        app: PATHS.app,
    },
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.(js|jsx|ts|tsx)$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            include: /src/,
            sideEffects: false,
        }, 
        { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader'},
        {
            test: /\.(scss|css)$/,
            use: [
                {
                loader: 'style-loader'
                },
                {
                loader: 'css-loader',
                options: {
                    modules: {
                        localIdentName: "[hash:base64]",
                        auto: true
                    },
                    sourceMap: true
                }
                },
                {
                loader: 'sass-loader'
                }
            ]
        }
    ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.css'],
        modules: [__dirname,
            'node_modules'
        ],
        fallback: { buffer: false },
    },
    devtool: 'source-map'
}

Can anyone suggest me where is my configuration is going wrong