Not working with webpack 5, please help.

[ravismakwana]

I'm getting an error like the below.

ERROR in ./src/sass/main.scss (./src/sass/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/sass/main.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin


ERROR in ./src/sass/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin

Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin

Here is my webpack.config.js file

const path                      = require('path');
const MiniCssExtractPlugin      = require('mini-css-extract-plugin');
const {CleanWebpackPlugin}      = require('clean-webpack-plugin');
const CssMinimizerPlugin        = require("css-minimizer-webpack-plugin");
const TerserPlugin              = require("terser-webpack-plugin");


const JS_DIR        = path.resolve(__dirname, 'src/js')
const IMG_DIR       = path.resolve(__dirname, 'src/img')
const BUILD_DIR     = path.resolve(__dirname, 'build')

const entry = {
    main: JS_DIR + '/main.js'
}

const output = {
    path: BUILD_DIR,
    filename: 'js/[name].js'
}

const plugins = (argv) => [
    new CleanWebpackPlugin({
        cleanStaleWebpackAssets: ('production' === argv.mode)
    }),

    new MiniCssExtractPlugin({
        filename: 'css/[name].css'
    }),
    new CssMinimizerPlugin(),
]

const rules = [
    {
        test: /\.js$/,
        include: [JS_DIR],
        exclude: /node_modules/,
        use: 'babel-loader'
    },
    {
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "postcss-loader",
            "sass-loader",
        ],
    },
    {
        test: /\.(png|jpg|jpeg|svg|gif|ico)$/,
        generator: {
            filename: '[path][name].[ext]',
        },
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                    publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
                },
            },
        ],
    },
    {
        test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        exclude: [IMG_DIR, /node_modules/],
        generator: {
            filename: '[path][name].[ext]',
        },
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                    publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
                }
            }
        ]
    }
]

module.exports = (env, argv) => ({
    entry: entry,
    output: output,
    devtool: 'source-map',
    module: {
        rules: rules
    },
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin({
                minify: [
                    CssMinimizerPlugin.cssnanoMinify,
                    CssMinimizerPlugin.cleanCssMinify
                ]
            }),
            new TerserPlugin({
                minify: TerserPlugin.uglifyJsMinify,
                parallel: true,
            }),
        ]
    },

    plugins: plugins(argv),

    externals: {
        jquery: 'jQuery'
    }
})

@imranhsayed thank you in advance.