React not rendering custom elements (babel + webpack) - reactjs

Question

I created an app using create-react-app and started to use webpack and babel.
What I get from this code is that I cannot render my components (example, <App />).
I can only render elements like h1 or h2, even if I import App in index.js (and don't use it), I cannot see anything.
I run with npm run dev-server.
webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['#babel/react']
}
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public')
}
};
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './style.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="mainContainer">
<h1>Test h1</h1>
<h2>Test h2</h2>
<p>Test p</p>
</div>
);
}
}
export default App;
package.json:
{
"name": "smartpharma-front",
"version": "0.0.1",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "^3.3.0"
},
"scripts": {
"start": "webpack --mode=development",
"build": "webpack --mode=production",
"dev-server": "webpack-dev-server",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"engines": {
"node": "13.3.0",
"npm": "6.13.1"
},
"devDependencies": {
"#babel/core": "^7.7.7",
"#babel/preset-env": "^7.7.7",
"#babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.0",
"style-loader": "^1.1.1",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10"
},
"description": "SmartPharma Frontend",
"main": "webpack.config.js",
"repository": {
"type": "git",
"url": "git+https://github.com/vfeder6/smartpharma-front.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/vfeder6/smartpharma-front/issues"
},
"homepage": "https://github.com/vfeder6/smartpharma-front#readme"
}