Webpack configuration not working for jsx file with babel lorder

When runing the react project which is configured with webpack and babel loder is giving and error saying unexpected token in jsx files.Please find bellow error snippit

ERROR in ./src/index.js 10:12
Module parse failed: Unexpected token (10:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const root = createRoot(domNode);
| 
 root.render(<App />);

Please find the package.json file of my project.

    {
      "name": "container",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack serve --mode development --open",
        "build": "webpack --mode production"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "webpack": "^5.88.0",
        "webpack-cli": "^5.1.4"
      },
      "devDependencies": {
        "@babel/core": "^7.24.7",
        "@babel/preset-env": "^7.24.7",
        "@babel/preset-react": "^7.24.7",
        "babel-loader": "^9.1.3",
        "css-loader": "^7.1.2",
        "html-webpack-plugin": "^5.6.0",
        "style-loader": "^4.0.0",
        "webpack-dev-server": "^5.0.4"
      }
    }

Please find the webpack config in my project.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public','index.html'),
            template: './public/index.html'
        }),
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                    },
                },
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },
        port: 3000,
    },
};

I tried reinstalling the packages clearing the cache but still I am getting this error while running the project. So If someone can help on this with me to setup this correctly it would be great.

• Node version : 20.12.1
• OS - Mac OS

Bellow is how my project structure looks like.

You need to use -c, --config <pathToConfigFile...> to provide path to one or more webpack configuration files to process, e.g. "./webpack.config.js".

Change the npm start script to this:

"start": "webpack serve --mode development --open --config ./config/webpack.config.js",

Then, run the npm start, the logs:

$ npm start

> container@1.0.0 start
> webpack serve --mode development --open --config ./config/webpack.config.js

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.10.197:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'D:\workspace\mrdulin\webpack-samples\webpack-v5\stackoverflow\78680193\config\public' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
asset bundle.js 1.37 MiB [emitted] (name: main)
asset index.html 314 bytes [emitted]
runtime modules 27.5 KiB 13 modules
modules by path ./node_modules/ 1.25 MiB
  modules by path ./node_modules/webpack-dev-server/client/ 69.7 KiB 16 modules
  modules by path ./node_modules/webpack/hot/*.js 5.18 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 78.9 KiB 4 modules
  modules by path ./node_modules/react-dom/ 1010 KiB 3 modules
  modules by path ./node_modules/react/ 85.7 KiB
    ./node_modules/react/index.js 190 bytes [built] [code generated]
    ./node_modules/react/cjs/react.development.js 85.5 KiB [built] [code generated]
  modules by path ./node_modules/scheduler/ 17.3 KiB
    ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.development.js 17.1 KiB [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/index.js 198 bytes [built] [code generated]
webpack 5.92.1 compiled successfully in 920 ms

src/index.js:

import React from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));

root.render(<div>test</div>);

Output: