I am trying to get webpack to work with Babel and React to get my .jsx files transpiled to .js to get used in web browser but I am failing.

My webpack.config.js:

module.exports = {
    mode: 'production',
    entry: './src/pages/',
    output: {
        path: '/pathToMyProj/__assets',
        filename: '[name].js',
        uniqueName: 'myProject'
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                include: `${process.cwd()}/src/**/*.jsx`,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-react",  "@babel/preset-env"]
                    } 
                }
            }
        ]
    },
    resolve: {
        modules: ['node_modules/**/*'],
        extensions: ['.jsx', '.js'],
    },

    experiments: {
        topLevelAwait: true
    }
}

my .babelsrc:

{  
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [],
    "comments": false,
    "compact": true
}

my package.json:

{
  "dependencies": {
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "axios": "^0.27.2",
    "babel-loader": "^8.2.5",
    "babel-preset-es2015": "^6.24.1",
    "path": "^0.12.7",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "webpack": "^5.72.1"
  },
  "devDependencies": {
    "webpack-cli": "^4.9.2"
  }
}

with this config (webpack@5.72.1, webpack-cli@4.9.2), but somehow webpack can't recognize jsx syntax and is throwing an error:

ERROR in ./src/pages/index.jsx 21:4
Module parse failed: Unexpected token (21:4)
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

|     toRender = 
>     <p><br />Welcome<br /><a href="/manage">Test</a><br /><br />Not you? <a href="/logoff">Log off</a></p>
|     }
|   } else {

webpack 5.72.1 compiled with 1 error in 231 ms

how can I fix this?