My app does not recognize JSX when I run babel - reactjs

Question

I am following instructions from a React course when setting up Babel with Webpack and now I get this error:
ERROR in ./src/app.js
Module build failed: SyntaxError: C:/Users/38164/Desktop/react-course-projects/indecision-app/src/app.js: Unexpected token (4:17)
image of the error
Here are the files from the setup:
app.js
import React from 'react';
import ReactDOM from 'react-dom';
const template = <p>testing</p>;
ReactDOM.render(template, document.getElementById('app'));
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/app.js",
output: {
path: path.join(__dirname, "public"),
filename: "bundle.js",
},
module: {
rules: [{
loader: "babel-loader",
test: /\.js$/,
exclude: /node_modules/
}
]
}
};
package.json
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"serve": "live-server public/",
"build": "webpack --watch",
"build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
},
"dependencies": {
"#babel/core": "^7.20.12",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-cli": "6.24.1",
"babel-loader": "7.1.1",
"live-server": "^1.2.2",
"react": "16.0.0",
"react-dom": "16.0.0",
"validator": "8.0.0",
"webpack": "3.1.0"
}
}
.babelrs
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
Does anyone have any suggestions?
There is probably something minor, but I can't figure it out, as this is new for me.